@bootdesk/js-web-adapter-react 0.1.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.
- package/README.md +93 -0
- package/dist/index.cjs +2536 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +395 -0
- package/dist/index.d.ts +395 -0
- package/dist/index.js +2466 -0
- package/dist/index.js.map +1 -0
- package/dist/styles.css +1 -0
- package/package.json +64 -0
package/dist/index.d.cts
ADDED
|
@@ -0,0 +1,395 @@
|
|
|
1
|
+
import React, { Component, ReactNode } from 'react';
|
|
2
|
+
import { WebChatClient, Message, Card, CustomCard, WebChatClientConfig, BroadcastClient, PushConfig, PushSubscriptionStatus } from '@bootdesk/js-web-adapter-core';
|
|
3
|
+
export { Card, CustomCard, LaravelEchoBroadcastClient, Message, PHPCard, PushConfig, PushEventData, PushManager, PushSubscriptionStatus, PusherBroadcastClient, User, WebChatClient, createPushSubscriptionHandlers } from '@bootdesk/js-web-adapter-core';
|
|
4
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
5
|
+
|
|
6
|
+
interface PendingAttachment {
|
|
7
|
+
id: string;
|
|
8
|
+
file: File;
|
|
9
|
+
name: string;
|
|
10
|
+
mimeType: string;
|
|
11
|
+
size: number;
|
|
12
|
+
status: "pending" | "uploading" | "uploaded" | "error";
|
|
13
|
+
progress: number;
|
|
14
|
+
url?: string;
|
|
15
|
+
error?: string;
|
|
16
|
+
}
|
|
17
|
+
interface SignedUploadUrl {
|
|
18
|
+
uploadUrl: string;
|
|
19
|
+
finalUrl: string;
|
|
20
|
+
headers?: Record<string, string>;
|
|
21
|
+
metadata?: Record<string, unknown>;
|
|
22
|
+
}
|
|
23
|
+
interface AttachmentUploadConfig {
|
|
24
|
+
requestSignedUrl: (file: {
|
|
25
|
+
name: string;
|
|
26
|
+
mimeType: string;
|
|
27
|
+
size: number;
|
|
28
|
+
}) => Promise<SignedUploadUrl>;
|
|
29
|
+
uploadToSignedUrl: (signedUrl: SignedUploadUrl, file: File, onProgress?: (pct: number) => void) => Promise<boolean>;
|
|
30
|
+
confirmUpload: (signedUrl: SignedUploadUrl, fileMeta: {
|
|
31
|
+
name: string;
|
|
32
|
+
mimeType: string;
|
|
33
|
+
size: number;
|
|
34
|
+
}) => Promise<string>;
|
|
35
|
+
}
|
|
36
|
+
interface SimpleUploadConfig {
|
|
37
|
+
endpoint: string;
|
|
38
|
+
headers?: Record<string, string>;
|
|
39
|
+
}
|
|
40
|
+
type UploadConfig = AttachmentUploadConfig | SimpleUploadConfig;
|
|
41
|
+
|
|
42
|
+
type DisplayMode = "floating" | "fullscreen" | "embedded";
|
|
43
|
+
type ThemeMode = "light" | "dark" | "auto";
|
|
44
|
+
interface ChatWidgetProps {
|
|
45
|
+
client: WebChatClient;
|
|
46
|
+
initialMode?: DisplayMode;
|
|
47
|
+
theme?: ThemeMode;
|
|
48
|
+
onThemeChange?: (theme: ThemeMode) => void;
|
|
49
|
+
position?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
|
|
50
|
+
className?: {
|
|
51
|
+
container?: string;
|
|
52
|
+
header?: string;
|
|
53
|
+
messageList?: string;
|
|
54
|
+
inputArea?: string;
|
|
55
|
+
};
|
|
56
|
+
showClose?: boolean;
|
|
57
|
+
showFullscreenToggle?: boolean;
|
|
58
|
+
title?: string;
|
|
59
|
+
placeholder?: string;
|
|
60
|
+
onOpen?: () => void;
|
|
61
|
+
onClose?: () => void;
|
|
62
|
+
embedded?: boolean;
|
|
63
|
+
floatingButton?: {
|
|
64
|
+
icon?: React.ReactNode;
|
|
65
|
+
openIcon?: React.ReactNode;
|
|
66
|
+
badgeCount?: number;
|
|
67
|
+
size?: number;
|
|
68
|
+
backgroundColor?: string;
|
|
69
|
+
ariaLabel?: string;
|
|
70
|
+
className?: string;
|
|
71
|
+
};
|
|
72
|
+
enableAttachments?: boolean;
|
|
73
|
+
uploadConfig?: UploadConfig;
|
|
74
|
+
accept?: string;
|
|
75
|
+
maxFileSize?: number;
|
|
76
|
+
renderPushPrompt?: () => React.ReactNode;
|
|
77
|
+
}
|
|
78
|
+
declare function ChatWidget({ client, initialMode, theme: themeProp, onThemeChange, position, className, showClose, showFullscreenToggle, title, placeholder, onOpen, onClose, embedded, floatingButton, enableAttachments, uploadConfig, accept, maxFileSize, renderPushPrompt, }: ChatWidgetProps): React.JSX.Element;
|
|
79
|
+
|
|
80
|
+
interface HeaderProps {
|
|
81
|
+
title?: string;
|
|
82
|
+
onClose?: () => void;
|
|
83
|
+
onToggleFullscreen?: () => void;
|
|
84
|
+
isFullscreen?: boolean;
|
|
85
|
+
showConnectionStatus?: boolean;
|
|
86
|
+
isConnected?: boolean;
|
|
87
|
+
className?: string;
|
|
88
|
+
theme?: string;
|
|
89
|
+
onThemeChange?: (theme: "light" | "dark" | "auto") => void;
|
|
90
|
+
}
|
|
91
|
+
declare function Header({ title, onClose, onToggleFullscreen, isFullscreen, showConnectionStatus, isConnected, className, theme, onThemeChange, }: HeaderProps): React.JSX.Element;
|
|
92
|
+
|
|
93
|
+
interface MessageListProps {
|
|
94
|
+
messages: Message[];
|
|
95
|
+
currentUserId: string;
|
|
96
|
+
isLoading?: boolean;
|
|
97
|
+
onReactionClick?: (messageId: string, emoji: string) => void;
|
|
98
|
+
onActionClick?: (messageId: string, actionId: string, value: string) => void;
|
|
99
|
+
className?: string;
|
|
100
|
+
}
|
|
101
|
+
declare function MessageList({ messages, currentUserId, isLoading, onReactionClick, onActionClick, className, }: MessageListProps): React.JSX.Element;
|
|
102
|
+
|
|
103
|
+
interface MessageContentProps {
|
|
104
|
+
message: Message;
|
|
105
|
+
onActionClick?: (messageId: string, actionId: string, value: string) => void;
|
|
106
|
+
}
|
|
107
|
+
declare function MessageContent({ message, onActionClick }: MessageContentProps): React.JSX.Element;
|
|
108
|
+
|
|
109
|
+
interface InputAreaProps {
|
|
110
|
+
onSend: (text: string, attachments: Array<{
|
|
111
|
+
url: string;
|
|
112
|
+
name: string;
|
|
113
|
+
mimeType: string;
|
|
114
|
+
size: number;
|
|
115
|
+
}>) => Promise<void>;
|
|
116
|
+
disabled?: boolean;
|
|
117
|
+
placeholder?: string;
|
|
118
|
+
className?: string;
|
|
119
|
+
enableAttachments?: boolean;
|
|
120
|
+
uploadConfig?: UploadConfig;
|
|
121
|
+
accept?: string;
|
|
122
|
+
maxFileSize?: number;
|
|
123
|
+
}
|
|
124
|
+
declare function InputArea({ onSend, disabled, placeholder, className, enableAttachments, uploadConfig, accept, maxFileSize, }: InputAreaProps): React.JSX.Element;
|
|
125
|
+
|
|
126
|
+
interface TypingIndicatorProps {
|
|
127
|
+
users?: string[];
|
|
128
|
+
}
|
|
129
|
+
declare function TypingIndicator({ users }: TypingIndicatorProps): React.JSX.Element;
|
|
130
|
+
|
|
131
|
+
interface FloatingButtonProps {
|
|
132
|
+
onClick: () => void;
|
|
133
|
+
isOpen: boolean;
|
|
134
|
+
position?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
|
|
135
|
+
className?: string;
|
|
136
|
+
icon?: React.ReactNode;
|
|
137
|
+
openIcon?: React.ReactNode;
|
|
138
|
+
badgeCount?: number;
|
|
139
|
+
size?: number;
|
|
140
|
+
backgroundColor?: string;
|
|
141
|
+
ariaLabel?: string;
|
|
142
|
+
}
|
|
143
|
+
declare function FloatingButton({ onClick, isOpen, position, className, icon, openIcon, badgeCount, size, backgroundColor, ariaLabel, }: FloatingButtonProps): React.JSX.Element;
|
|
144
|
+
|
|
145
|
+
interface CardRendererProps {
|
|
146
|
+
card: Card | CustomCard;
|
|
147
|
+
onActionClick?: (actionId: string, value: string) => void;
|
|
148
|
+
}
|
|
149
|
+
type CardRenderer$1 = React.ComponentType<CardRendererProps>;
|
|
150
|
+
type CardRendererMap = Map<string, CardRenderer$1>;
|
|
151
|
+
|
|
152
|
+
declare function CardRenderer({ card, onActionClick }: CardRendererProps): React.JSX.Element | null;
|
|
153
|
+
|
|
154
|
+
declare function DefaultCard({ card: rawCard, onActionClick, }: CardRendererProps): React.JSX.Element | null;
|
|
155
|
+
|
|
156
|
+
declare function ImageCardComponent({ card: rawCard }: CardRendererProps): React.JSX.Element | null;
|
|
157
|
+
|
|
158
|
+
declare function FileCardComponent({ card: rawCard }: CardRendererProps): React.JSX.Element | null;
|
|
159
|
+
|
|
160
|
+
interface CardContextValue {
|
|
161
|
+
renderers: CardRendererMap;
|
|
162
|
+
registerRenderer: (type: string, renderer: CardRenderer$1) => void;
|
|
163
|
+
getRenderer: (type: string) => CardRenderer$1 | undefined;
|
|
164
|
+
}
|
|
165
|
+
interface CardProviderProps {
|
|
166
|
+
children: React.ReactNode;
|
|
167
|
+
renderers?: Record<string, CardRenderer$1>;
|
|
168
|
+
}
|
|
169
|
+
declare function CardProvider({ children, renderers }: CardProviderProps): React.JSX.Element;
|
|
170
|
+
declare function useCardRegistry(): CardContextValue;
|
|
171
|
+
|
|
172
|
+
interface ChatContextValue {
|
|
173
|
+
client: WebChatClient;
|
|
174
|
+
}
|
|
175
|
+
interface ChatProviderProps {
|
|
176
|
+
children: React.ReactNode;
|
|
177
|
+
client: WebChatClient;
|
|
178
|
+
cardRenderers?: Record<string, CardRenderer$1>;
|
|
179
|
+
}
|
|
180
|
+
declare function ChatProvider({ children, client, cardRenderers, }: ChatProviderProps): React.JSX.Element;
|
|
181
|
+
declare function useChatContext(): ChatContextValue;
|
|
182
|
+
|
|
183
|
+
declare function useChatClient(config: Omit<WebChatClientConfig, "broadcastClient"> & {
|
|
184
|
+
broadcastClient?: BroadcastClient;
|
|
185
|
+
}): WebChatClient;
|
|
186
|
+
|
|
187
|
+
interface UseMessagesResult {
|
|
188
|
+
messages: Message[];
|
|
189
|
+
loading: boolean;
|
|
190
|
+
isLoadingHistory: boolean;
|
|
191
|
+
hasMore: boolean;
|
|
192
|
+
loadMore: () => Promise<void>;
|
|
193
|
+
reloadMessages: () => Promise<void>;
|
|
194
|
+
retryLoad: () => Promise<void>;
|
|
195
|
+
loadError: Error | null;
|
|
196
|
+
canEdit: boolean;
|
|
197
|
+
canDelete: boolean;
|
|
198
|
+
canReact: boolean;
|
|
199
|
+
sendMessage: (text: string, attachments?: Array<{
|
|
200
|
+
url: string;
|
|
201
|
+
name: string;
|
|
202
|
+
mimeType: string;
|
|
203
|
+
size: number;
|
|
204
|
+
}>) => Promise<void>;
|
|
205
|
+
editMessage: (id: string, text: string) => Promise<void>;
|
|
206
|
+
deleteMessage: (id: string) => Promise<void>;
|
|
207
|
+
addReaction: (id: string, emoji: string) => Promise<void>;
|
|
208
|
+
removeReaction: (id: string, emoji: string) => Promise<void>;
|
|
209
|
+
}
|
|
210
|
+
declare function useMessages(client: WebChatClient, enabled?: boolean): UseMessagesResult;
|
|
211
|
+
|
|
212
|
+
interface StreamingState {
|
|
213
|
+
messageId: string;
|
|
214
|
+
fullText: string;
|
|
215
|
+
isComplete: boolean;
|
|
216
|
+
}
|
|
217
|
+
interface UseStreamingResult {
|
|
218
|
+
streamingMessages: Map<string, StreamingState>;
|
|
219
|
+
isStreaming: boolean;
|
|
220
|
+
}
|
|
221
|
+
declare function useStreaming(client: WebChatClient): UseStreamingResult;
|
|
222
|
+
|
|
223
|
+
interface UseTypingResult {
|
|
224
|
+
typingUsers: Set<string>;
|
|
225
|
+
isSomeoneTyping: boolean;
|
|
226
|
+
}
|
|
227
|
+
declare function useTyping(client: WebChatClient): UseTypingResult;
|
|
228
|
+
|
|
229
|
+
declare function renderMarkdown(text: string): string;
|
|
230
|
+
declare function MarkdownRenderer({ text, className, }: {
|
|
231
|
+
text: string;
|
|
232
|
+
className?: string;
|
|
233
|
+
}): React.JSX.Element;
|
|
234
|
+
|
|
235
|
+
interface ErrorBoundaryProps {
|
|
236
|
+
children: ReactNode;
|
|
237
|
+
fallback?: ReactNode | ((error: Error) => ReactNode);
|
|
238
|
+
onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
|
|
239
|
+
}
|
|
240
|
+
interface ErrorBoundaryState {
|
|
241
|
+
error: Error | null;
|
|
242
|
+
}
|
|
243
|
+
declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
|
|
244
|
+
constructor(props: ErrorBoundaryProps);
|
|
245
|
+
static getDerivedStateFromError(error: Error): ErrorBoundaryState;
|
|
246
|
+
componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
|
|
247
|
+
render(): ReactNode;
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
interface DropzoneProps {
|
|
251
|
+
onFilesSelected: (files: FileList | File[]) => void;
|
|
252
|
+
disabled?: boolean;
|
|
253
|
+
accept?: string;
|
|
254
|
+
maxSize?: number;
|
|
255
|
+
multiple?: boolean;
|
|
256
|
+
className?: string;
|
|
257
|
+
}
|
|
258
|
+
declare function Dropzone({ onFilesSelected, disabled, accept, maxSize, multiple, className, }: DropzoneProps): React.JSX.Element;
|
|
259
|
+
|
|
260
|
+
interface AttachmentListProps {
|
|
261
|
+
attachments: PendingAttachment[];
|
|
262
|
+
onRemove?: (id: string) => void;
|
|
263
|
+
className?: string;
|
|
264
|
+
}
|
|
265
|
+
declare function AttachmentList({ attachments, onRemove, className, }: AttachmentListProps): React.JSX.Element;
|
|
266
|
+
|
|
267
|
+
declare function useAttachmentUpload(uploadConfig: UploadConfig): {
|
|
268
|
+
attachments: PendingAttachment[];
|
|
269
|
+
addFiles: (files: FileList | File[]) => void;
|
|
270
|
+
removeAttachment: (id: string) => void;
|
|
271
|
+
clearAttachments: () => void;
|
|
272
|
+
resetUploads: () => void;
|
|
273
|
+
getUploadedAttachments: () => PendingAttachment[];
|
|
274
|
+
isUploading: boolean;
|
|
275
|
+
isComplete: boolean;
|
|
276
|
+
};
|
|
277
|
+
|
|
278
|
+
interface LocaleStrings {
|
|
279
|
+
chatWidget: {
|
|
280
|
+
title: string;
|
|
281
|
+
placeholder: string;
|
|
282
|
+
openChat: string;
|
|
283
|
+
closeChat: string;
|
|
284
|
+
connectionStatus: {
|
|
285
|
+
connected: string;
|
|
286
|
+
disconnected: string;
|
|
287
|
+
};
|
|
288
|
+
};
|
|
289
|
+
inputArea: {
|
|
290
|
+
send: string;
|
|
291
|
+
uploading: string;
|
|
292
|
+
dropzone: {
|
|
293
|
+
dropFiles: string;
|
|
294
|
+
dropOrClick: string;
|
|
295
|
+
};
|
|
296
|
+
};
|
|
297
|
+
typingIndicator: {
|
|
298
|
+
typing: string;
|
|
299
|
+
isTyping: string;
|
|
300
|
+
};
|
|
301
|
+
messageList: {
|
|
302
|
+
emptyState: string;
|
|
303
|
+
};
|
|
304
|
+
attachmentList: {
|
|
305
|
+
remove: string;
|
|
306
|
+
uploadFailed: string;
|
|
307
|
+
};
|
|
308
|
+
header: {
|
|
309
|
+
enterFullscreen: string;
|
|
310
|
+
exitFullscreen: string;
|
|
311
|
+
closeChat: string;
|
|
312
|
+
lightMode: string;
|
|
313
|
+
darkMode: string;
|
|
314
|
+
autoMode: string;
|
|
315
|
+
};
|
|
316
|
+
floatingButton: {
|
|
317
|
+
openChat: string;
|
|
318
|
+
closeChat: string;
|
|
319
|
+
};
|
|
320
|
+
common: {
|
|
321
|
+
loading: string;
|
|
322
|
+
error: string;
|
|
323
|
+
retry: string;
|
|
324
|
+
cancel: string;
|
|
325
|
+
download: string;
|
|
326
|
+
};
|
|
327
|
+
}
|
|
328
|
+
type SupportedLocale = "en" | "en-US" | "en-GB" | "pt" | "pt-BR" | "pt-PT" | "es";
|
|
329
|
+
type PartialLocaleStrings = Partial<{
|
|
330
|
+
[K in keyof LocaleStrings]: Partial<LocaleStrings[K]>;
|
|
331
|
+
}> & {
|
|
332
|
+
chatWidget?: Partial<LocaleStrings["chatWidget"]> & {
|
|
333
|
+
connectionStatus?: Partial<LocaleStrings["chatWidget"]["connectionStatus"]>;
|
|
334
|
+
};
|
|
335
|
+
inputArea?: Partial<LocaleStrings["inputArea"]> & {
|
|
336
|
+
dropzone?: Partial<LocaleStrings["inputArea"]["dropzone"]>;
|
|
337
|
+
};
|
|
338
|
+
messageList?: Partial<LocaleStrings["messageList"]>;
|
|
339
|
+
common?: Partial<LocaleStrings["common"]>;
|
|
340
|
+
};
|
|
341
|
+
interface LocaleConfig {
|
|
342
|
+
locale: string;
|
|
343
|
+
overrides?: PartialLocaleStrings;
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
interface LocaleContextValue {
|
|
347
|
+
locale: string;
|
|
348
|
+
strings: LocaleStrings;
|
|
349
|
+
t: (path: string) => string;
|
|
350
|
+
}
|
|
351
|
+
interface LocaleProviderProps {
|
|
352
|
+
children: React.ReactNode;
|
|
353
|
+
locale?: LocaleConfig | string;
|
|
354
|
+
}
|
|
355
|
+
declare function LocaleProvider({ children, locale }: LocaleProviderProps): React.JSX.Element;
|
|
356
|
+
declare function useLocale(): LocaleContextValue;
|
|
357
|
+
|
|
358
|
+
declare function registerLocale(locale: string, strings: LocaleStrings): void;
|
|
359
|
+
declare function getAvailableLocales(): string[];
|
|
360
|
+
|
|
361
|
+
interface PushPermissionPromptProps {
|
|
362
|
+
autoHide?: boolean;
|
|
363
|
+
title?: string;
|
|
364
|
+
description?: string;
|
|
365
|
+
onStatusChange?: (enabled: boolean) => void;
|
|
366
|
+
getVapidPublicKey: () => Promise<string>;
|
|
367
|
+
onSubscribe: (sub: PushSubscriptionJSON) => Promise<void>;
|
|
368
|
+
onUnsubscribe: (sub: PushSubscriptionJSON) => Promise<void>;
|
|
369
|
+
}
|
|
370
|
+
declare function PushPermissionPrompt({ autoHide, title, description, onStatusChange, getVapidPublicKey, onSubscribe, onUnsubscribe, }: PushPermissionPromptProps): react_jsx_runtime.JSX.Element | null;
|
|
371
|
+
|
|
372
|
+
interface PushToggleProps {
|
|
373
|
+
getVapidPublicKey: () => Promise<string>;
|
|
374
|
+
onSubscribe: (sub: PushSubscriptionJSON) => Promise<void>;
|
|
375
|
+
onUnsubscribe: (sub: PushSubscriptionJSON) => Promise<void>;
|
|
376
|
+
}
|
|
377
|
+
declare function PushToggle({ getVapidPublicKey, onSubscribe, onUnsubscribe }: PushToggleProps): react_jsx_runtime.JSX.Element;
|
|
378
|
+
|
|
379
|
+
interface UsePushNotificationsOptions {
|
|
380
|
+
enabled?: boolean;
|
|
381
|
+
getVapidPublicKey: () => Promise<string>;
|
|
382
|
+
onSubscribe: PushConfig["onSubscribe"];
|
|
383
|
+
onUnsubscribe: PushConfig["onUnsubscribe"];
|
|
384
|
+
serviceWorkerUrl?: string;
|
|
385
|
+
notificationOptions?: PushConfig["notificationOptions"];
|
|
386
|
+
}
|
|
387
|
+
declare function usePushNotifications(options: UsePushNotificationsOptions): {
|
|
388
|
+
status: PushSubscriptionStatus;
|
|
389
|
+
isSupported: boolean;
|
|
390
|
+
isSubscribed: boolean;
|
|
391
|
+
subscribe: () => Promise<void>;
|
|
392
|
+
unsubscribe: () => Promise<void>;
|
|
393
|
+
};
|
|
394
|
+
|
|
395
|
+
export { AttachmentList, type AttachmentUploadConfig, CardProvider, CardRenderer, type CardRendererProps, type CardRenderer$1 as CardRendererType, ChatProvider, ChatWidget, type ChatWidgetProps, DefaultCard, Dropzone, ErrorBoundary, FileCardComponent, FloatingButton, Header, ImageCardComponent, InputArea, type LocaleConfig, LocaleProvider, type LocaleStrings, MarkdownRenderer, MessageContent, MessageList, type PartialLocaleStrings, type PendingAttachment, PushPermissionPrompt, PushToggle, type SignedUploadUrl, type SimpleUploadConfig, type SupportedLocale, TypingIndicator, type UploadConfig, getAvailableLocales, registerLocale, renderMarkdown, useAttachmentUpload, useCardRegistry, useCardRegistry as useCardRendererRegistry, useChatClient, useChatContext, useLocale, useMessages, usePushNotifications, useStreaming, useTyping };
|