@xcelsior/ui-chat 2.0.4 → 2.0.6
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/dist/index.d.mts +58 -5
- package/dist/index.d.ts +58 -5
- package/dist/index.js +1043 -427
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1010 -397
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -1
- package/src/components/BookingCancelledCard.tsx +103 -0
- package/src/components/BookingCards.stories.tsx +102 -0
- package/src/components/BookingConfirmationCard.tsx +170 -0
- package/src/components/BookingSlotPicker.stories.tsx +87 -0
- package/src/components/BookingSlotPicker.tsx +256 -0
- package/src/components/BrandIcons.stories.tsx +32 -1
- package/src/components/BrandIcons.tsx +21 -17
- package/src/components/Chat.tsx +43 -9
- package/src/components/ChatWidget.tsx +30 -2
- package/src/components/MessageItem.tsx +83 -72
- package/src/components/MessageList.tsx +4 -0
- package/src/hooks/useDraggablePosition.ts +147 -42
- package/src/hooks/useMessages.ts +106 -53
- package/src/hooks/useWebSocket.ts +17 -4
- package/src/index.tsx +11 -0
- package/src/types.ts +39 -2
- package/src/utils/api.ts +1 -0
- package/storybook-static/assets/BookingCancelledCard-XHuB-Ebp.js +31 -0
- package/storybook-static/assets/BookingCards.stories-DfJ482RS.js +66 -0
- package/storybook-static/assets/BookingSlotPicker-BkfssueW.js +1 -0
- package/storybook-static/assets/BookingSlotPicker.stories-fYlg1zLg.js +50 -0
- package/storybook-static/assets/BrandIcons-BsRAdWzL.js +4 -0
- package/storybook-static/assets/BrandIcons.stories-C6gBovfU.js +106 -0
- package/storybook-static/assets/Chat.stories-BrR7LHsz.js +830 -0
- package/storybook-static/assets/{Color-YHDXOIA2-CSuNIR0a.js → Color-YHDXOIA2-azE51u2m.js} +1 -1
- package/storybook-static/assets/{DocsRenderer-CFRXHY34-dpuOKTQp.js → DocsRenderer-CFRXHY34-jTmzKIDk.js} +3 -3
- package/storybook-static/assets/MessageItem-pEOwuLyh.js +34 -0
- package/storybook-static/assets/{MessageItem.stories-CsxqSqu-.js → MessageItem.stories-Cs5Vtkle.js} +2 -2
- package/storybook-static/assets/{entry-preview-C_-WO6GJ.js → entry-preview-vcpiajAT.js} +1 -1
- package/storybook-static/assets/globe-BtMvkLMD.js +31 -0
- package/storybook-static/assets/{iframe-BXTccXxS.js → iframe-Cx1n-SeE.js} +2 -2
- package/storybook-static/assets/{preview-Cyx3pE7Q.js → preview-Do3b3dZv.js} +2 -2
- package/storybook-static/iframe.html +1 -1
- package/storybook-static/index.json +1 -1
- package/storybook-static/project.json +1 -1
- package/storybook-static/assets/BrandIcons-Cjy5INAp.js +0 -4
- package/storybook-static/assets/BrandIcons.stories-BeVC6svr.js +0 -64
- package/storybook-static/assets/Chat.stories-BkbpOOSG.js +0 -830
- package/storybook-static/assets/MessageItem-Dlb6dSKL.js +0 -14
package/dist/index.d.mts
CHANGED
|
@@ -7,7 +7,7 @@ interface IUser {
|
|
|
7
7
|
type: 'customer' | 'agent';
|
|
8
8
|
status?: 'online' | 'offline' | 'away' | 'busy';
|
|
9
9
|
}
|
|
10
|
-
type MessageType = 'text' | 'image' | 'file' | 'system';
|
|
10
|
+
type MessageType = 'text' | 'image' | 'file' | 'system' | 'booking_slots' | 'booking_confirmation' | 'booking_cancelled';
|
|
11
11
|
type MessageStatus = 'sent' | 'delivered' | 'read';
|
|
12
12
|
interface IMessage {
|
|
13
13
|
id: string;
|
|
@@ -43,8 +43,37 @@ interface IConversation {
|
|
|
43
43
|
satisfaction?: 1 | 2 | 3 | 4 | 5;
|
|
44
44
|
metadata?: Record<string, unknown>;
|
|
45
45
|
}
|
|
46
|
+
interface IBookingSlot {
|
|
47
|
+
date: string;
|
|
48
|
+
dayLabel: string;
|
|
49
|
+
dayName: string;
|
|
50
|
+
slots: string[];
|
|
51
|
+
}
|
|
52
|
+
interface IBookingData {
|
|
53
|
+
availableDates: IBookingSlot[];
|
|
54
|
+
timezone: string;
|
|
55
|
+
meetingDuration: number;
|
|
56
|
+
}
|
|
57
|
+
interface IBookingConfirmationData {
|
|
58
|
+
bookingId: string;
|
|
59
|
+
visitorName: string;
|
|
60
|
+
meetingDate: string;
|
|
61
|
+
meetingTime: string;
|
|
62
|
+
meetingDuration: number;
|
|
63
|
+
meetingPurpose: string;
|
|
64
|
+
meetLink?: string;
|
|
65
|
+
calendarLink?: string;
|
|
66
|
+
timezone: string;
|
|
67
|
+
}
|
|
68
|
+
interface IBookingCancelledData {
|
|
69
|
+
bookingId: string;
|
|
70
|
+
meetingDate: string;
|
|
71
|
+
meetingTime: string;
|
|
72
|
+
meetingPurpose: string;
|
|
73
|
+
cancelledBy: 'visitor' | 'admin';
|
|
74
|
+
}
|
|
46
75
|
interface IWebSocketMessage {
|
|
47
|
-
type: 'message' | 'typing' | 'read' | 'connected' | 'error' | 'system' | 'escalation_requested' | 'bot_response' | 'conversation_updated';
|
|
76
|
+
type: 'message' | 'typing' | 'read' | 'connected' | 'error' | 'system' | 'escalation_requested' | 'bot_response' | 'conversation_updated' | 'bot_not_responding' | 'booking_slots' | 'booking_confirmation' | 'booking_cancelled';
|
|
48
77
|
data: any;
|
|
49
78
|
}
|
|
50
79
|
interface ISendMessageData {
|
|
@@ -205,6 +234,26 @@ interface ChatWidgetWrapperProps {
|
|
|
205
234
|
}
|
|
206
235
|
declare function Chat({ config, className, storageKeyPrefix, onPreChatSubmit, state, defaultState, onStateChange, }: ChatWidgetWrapperProps): react_jsx_runtime.JSX.Element | null;
|
|
207
236
|
|
|
237
|
+
interface BookingCancelledCardProps {
|
|
238
|
+
data: IBookingCancelledData;
|
|
239
|
+
theme?: IChatTheme;
|
|
240
|
+
}
|
|
241
|
+
declare function BookingCancelledCard({ data, theme }: BookingCancelledCardProps): react_jsx_runtime.JSX.Element;
|
|
242
|
+
|
|
243
|
+
interface BookingConfirmationCardProps {
|
|
244
|
+
data: IBookingConfirmationData;
|
|
245
|
+
theme?: IChatTheme;
|
|
246
|
+
}
|
|
247
|
+
declare function BookingConfirmationCard({ data, theme }: BookingConfirmationCardProps): react_jsx_runtime.JSX.Element;
|
|
248
|
+
|
|
249
|
+
interface BookingSlotPickerProps {
|
|
250
|
+
data: IBookingData;
|
|
251
|
+
theme?: IChatTheme;
|
|
252
|
+
onSlotSelected: (date: string, time: string) => void;
|
|
253
|
+
disabled?: boolean;
|
|
254
|
+
}
|
|
255
|
+
declare function BookingSlotPicker({ data, theme, onSlotSelected, disabled }: BookingSlotPickerProps): react_jsx_runtime.JSX.Element | null;
|
|
256
|
+
|
|
208
257
|
interface ChatHeaderProps {
|
|
209
258
|
agent?: IUser;
|
|
210
259
|
onClose?: () => void;
|
|
@@ -243,8 +292,10 @@ interface MessageItemProps {
|
|
|
243
292
|
showAvatar?: boolean;
|
|
244
293
|
showTimestamp?: boolean;
|
|
245
294
|
theme?: IChatTheme;
|
|
295
|
+
/** Called when visitor selects a booking slot — sends their choice as a chat message */
|
|
296
|
+
onBookingSlotSelected?: (date: string, time: string, messageId: string) => void;
|
|
246
297
|
}
|
|
247
|
-
declare function MessageItem({ message, currentUser, showAvatar, showTimestamp, theme, }: MessageItemProps): react_jsx_runtime.JSX.Element;
|
|
298
|
+
declare function MessageItem({ message, currentUser, showAvatar, showTimestamp, theme, onBookingSlotSelected, }: MessageItemProps): react_jsx_runtime.JSX.Element;
|
|
248
299
|
|
|
249
300
|
interface ThinkingIndicatorProps {
|
|
250
301
|
/** Last message the user sent — used to pick contextual phrases */
|
|
@@ -271,8 +322,10 @@ interface MessageListProps {
|
|
|
271
322
|
onQuickAction?: (text: string) => void;
|
|
272
323
|
/** True when user sent a message and bot response hasn't arrived yet */
|
|
273
324
|
isBotThinking?: boolean;
|
|
325
|
+
/** Called when visitor selects a booking slot */
|
|
326
|
+
onBookingSlotSelected?: (date: string, time: string, messageId: string) => void;
|
|
274
327
|
}
|
|
275
|
-
declare function MessageList({ messages, currentUser, isLoading, isTyping, typingUser, autoScroll, onLoadMore, hasMore, isLoadingMore, theme, onQuickAction, isBotThinking, }: MessageListProps): react_jsx_runtime.JSX.Element;
|
|
328
|
+
declare function MessageList({ messages, currentUser, isLoading, isTyping, typingUser, autoScroll, onLoadMore, hasMore, isLoadingMore, theme, onQuickAction, isBotThinking, onBookingSlotSelected, }: MessageListProps): react_jsx_runtime.JSX.Element;
|
|
276
329
|
|
|
277
330
|
interface TypingIndicatorProps {
|
|
278
331
|
isTyping: boolean;
|
|
@@ -337,4 +390,4 @@ declare function fetchMessages(baseUrl: string, params: FetchMessagesParams, hea
|
|
|
337
390
|
nextPageToken: string | undefined;
|
|
338
391
|
}>;
|
|
339
392
|
|
|
340
|
-
export { Chat, ChatHeader, ChatInput, ChatWidget, type ChatWidgetProps, type ChatWidgetState, type ConversationChannel, type ConversationPriority, type ConversationStatus, type IApiResponse, type IChatConfig, type IConversation, type IFileUploadConfig, type IMessage, type IReadMessageData, type ISendMessageData, type ITypingData, type IUploadedFile, type IUser, type IWebSocketMessage, MarkdownMessage, MessageItem, MessageList, type MessageStatus, type MessageType, PreChatForm, ThinkingIndicator, type ThinkingIndicatorProps, TypingIndicator, type UseChatWidgetStateOptions, type UseChatWidgetStateReturn, type UseMessagesReturn, fetchMessages, useChatWidgetState, useFileUpload, useMessages, useTypingIndicator, useWebSocket };
|
|
393
|
+
export { BookingCancelledCard, BookingConfirmationCard, BookingSlotPicker, Chat, ChatHeader, ChatInput, ChatWidget, type ChatWidgetProps, type ChatWidgetState, type ConversationChannel, type ConversationPriority, type ConversationStatus, type IApiResponse, type IBookingCancelledData, type IBookingConfirmationData, type IBookingData, type IBookingSlot, type IChatConfig, type IConversation, type IFileUploadConfig, type IMessage, type IReadMessageData, type ISendMessageData, type ITypingData, type IUploadedFile, type IUser, type IWebSocketMessage, MarkdownMessage, MessageItem, MessageList, type MessageStatus, type MessageType, PreChatForm, ThinkingIndicator, type ThinkingIndicatorProps, TypingIndicator, type UseChatWidgetStateOptions, type UseChatWidgetStateReturn, type UseMessagesReturn, fetchMessages, useChatWidgetState, useFileUpload, useMessages, useTypingIndicator, useWebSocket };
|
package/dist/index.d.ts
CHANGED
|
@@ -7,7 +7,7 @@ interface IUser {
|
|
|
7
7
|
type: 'customer' | 'agent';
|
|
8
8
|
status?: 'online' | 'offline' | 'away' | 'busy';
|
|
9
9
|
}
|
|
10
|
-
type MessageType = 'text' | 'image' | 'file' | 'system';
|
|
10
|
+
type MessageType = 'text' | 'image' | 'file' | 'system' | 'booking_slots' | 'booking_confirmation' | 'booking_cancelled';
|
|
11
11
|
type MessageStatus = 'sent' | 'delivered' | 'read';
|
|
12
12
|
interface IMessage {
|
|
13
13
|
id: string;
|
|
@@ -43,8 +43,37 @@ interface IConversation {
|
|
|
43
43
|
satisfaction?: 1 | 2 | 3 | 4 | 5;
|
|
44
44
|
metadata?: Record<string, unknown>;
|
|
45
45
|
}
|
|
46
|
+
interface IBookingSlot {
|
|
47
|
+
date: string;
|
|
48
|
+
dayLabel: string;
|
|
49
|
+
dayName: string;
|
|
50
|
+
slots: string[];
|
|
51
|
+
}
|
|
52
|
+
interface IBookingData {
|
|
53
|
+
availableDates: IBookingSlot[];
|
|
54
|
+
timezone: string;
|
|
55
|
+
meetingDuration: number;
|
|
56
|
+
}
|
|
57
|
+
interface IBookingConfirmationData {
|
|
58
|
+
bookingId: string;
|
|
59
|
+
visitorName: string;
|
|
60
|
+
meetingDate: string;
|
|
61
|
+
meetingTime: string;
|
|
62
|
+
meetingDuration: number;
|
|
63
|
+
meetingPurpose: string;
|
|
64
|
+
meetLink?: string;
|
|
65
|
+
calendarLink?: string;
|
|
66
|
+
timezone: string;
|
|
67
|
+
}
|
|
68
|
+
interface IBookingCancelledData {
|
|
69
|
+
bookingId: string;
|
|
70
|
+
meetingDate: string;
|
|
71
|
+
meetingTime: string;
|
|
72
|
+
meetingPurpose: string;
|
|
73
|
+
cancelledBy: 'visitor' | 'admin';
|
|
74
|
+
}
|
|
46
75
|
interface IWebSocketMessage {
|
|
47
|
-
type: 'message' | 'typing' | 'read' | 'connected' | 'error' | 'system' | 'escalation_requested' | 'bot_response' | 'conversation_updated';
|
|
76
|
+
type: 'message' | 'typing' | 'read' | 'connected' | 'error' | 'system' | 'escalation_requested' | 'bot_response' | 'conversation_updated' | 'bot_not_responding' | 'booking_slots' | 'booking_confirmation' | 'booking_cancelled';
|
|
48
77
|
data: any;
|
|
49
78
|
}
|
|
50
79
|
interface ISendMessageData {
|
|
@@ -205,6 +234,26 @@ interface ChatWidgetWrapperProps {
|
|
|
205
234
|
}
|
|
206
235
|
declare function Chat({ config, className, storageKeyPrefix, onPreChatSubmit, state, defaultState, onStateChange, }: ChatWidgetWrapperProps): react_jsx_runtime.JSX.Element | null;
|
|
207
236
|
|
|
237
|
+
interface BookingCancelledCardProps {
|
|
238
|
+
data: IBookingCancelledData;
|
|
239
|
+
theme?: IChatTheme;
|
|
240
|
+
}
|
|
241
|
+
declare function BookingCancelledCard({ data, theme }: BookingCancelledCardProps): react_jsx_runtime.JSX.Element;
|
|
242
|
+
|
|
243
|
+
interface BookingConfirmationCardProps {
|
|
244
|
+
data: IBookingConfirmationData;
|
|
245
|
+
theme?: IChatTheme;
|
|
246
|
+
}
|
|
247
|
+
declare function BookingConfirmationCard({ data, theme }: BookingConfirmationCardProps): react_jsx_runtime.JSX.Element;
|
|
248
|
+
|
|
249
|
+
interface BookingSlotPickerProps {
|
|
250
|
+
data: IBookingData;
|
|
251
|
+
theme?: IChatTheme;
|
|
252
|
+
onSlotSelected: (date: string, time: string) => void;
|
|
253
|
+
disabled?: boolean;
|
|
254
|
+
}
|
|
255
|
+
declare function BookingSlotPicker({ data, theme, onSlotSelected, disabled }: BookingSlotPickerProps): react_jsx_runtime.JSX.Element | null;
|
|
256
|
+
|
|
208
257
|
interface ChatHeaderProps {
|
|
209
258
|
agent?: IUser;
|
|
210
259
|
onClose?: () => void;
|
|
@@ -243,8 +292,10 @@ interface MessageItemProps {
|
|
|
243
292
|
showAvatar?: boolean;
|
|
244
293
|
showTimestamp?: boolean;
|
|
245
294
|
theme?: IChatTheme;
|
|
295
|
+
/** Called when visitor selects a booking slot — sends their choice as a chat message */
|
|
296
|
+
onBookingSlotSelected?: (date: string, time: string, messageId: string) => void;
|
|
246
297
|
}
|
|
247
|
-
declare function MessageItem({ message, currentUser, showAvatar, showTimestamp, theme, }: MessageItemProps): react_jsx_runtime.JSX.Element;
|
|
298
|
+
declare function MessageItem({ message, currentUser, showAvatar, showTimestamp, theme, onBookingSlotSelected, }: MessageItemProps): react_jsx_runtime.JSX.Element;
|
|
248
299
|
|
|
249
300
|
interface ThinkingIndicatorProps {
|
|
250
301
|
/** Last message the user sent — used to pick contextual phrases */
|
|
@@ -271,8 +322,10 @@ interface MessageListProps {
|
|
|
271
322
|
onQuickAction?: (text: string) => void;
|
|
272
323
|
/** True when user sent a message and bot response hasn't arrived yet */
|
|
273
324
|
isBotThinking?: boolean;
|
|
325
|
+
/** Called when visitor selects a booking slot */
|
|
326
|
+
onBookingSlotSelected?: (date: string, time: string, messageId: string) => void;
|
|
274
327
|
}
|
|
275
|
-
declare function MessageList({ messages, currentUser, isLoading, isTyping, typingUser, autoScroll, onLoadMore, hasMore, isLoadingMore, theme, onQuickAction, isBotThinking, }: MessageListProps): react_jsx_runtime.JSX.Element;
|
|
328
|
+
declare function MessageList({ messages, currentUser, isLoading, isTyping, typingUser, autoScroll, onLoadMore, hasMore, isLoadingMore, theme, onQuickAction, isBotThinking, onBookingSlotSelected, }: MessageListProps): react_jsx_runtime.JSX.Element;
|
|
276
329
|
|
|
277
330
|
interface TypingIndicatorProps {
|
|
278
331
|
isTyping: boolean;
|
|
@@ -337,4 +390,4 @@ declare function fetchMessages(baseUrl: string, params: FetchMessagesParams, hea
|
|
|
337
390
|
nextPageToken: string | undefined;
|
|
338
391
|
}>;
|
|
339
392
|
|
|
340
|
-
export { Chat, ChatHeader, ChatInput, ChatWidget, type ChatWidgetProps, type ChatWidgetState, type ConversationChannel, type ConversationPriority, type ConversationStatus, type IApiResponse, type IChatConfig, type IConversation, type IFileUploadConfig, type IMessage, type IReadMessageData, type ISendMessageData, type ITypingData, type IUploadedFile, type IUser, type IWebSocketMessage, MarkdownMessage, MessageItem, MessageList, type MessageStatus, type MessageType, PreChatForm, ThinkingIndicator, type ThinkingIndicatorProps, TypingIndicator, type UseChatWidgetStateOptions, type UseChatWidgetStateReturn, type UseMessagesReturn, fetchMessages, useChatWidgetState, useFileUpload, useMessages, useTypingIndicator, useWebSocket };
|
|
393
|
+
export { BookingCancelledCard, BookingConfirmationCard, BookingSlotPicker, Chat, ChatHeader, ChatInput, ChatWidget, type ChatWidgetProps, type ChatWidgetState, type ConversationChannel, type ConversationPriority, type ConversationStatus, type IApiResponse, type IBookingCancelledData, type IBookingConfirmationData, type IBookingData, type IBookingSlot, type IChatConfig, type IConversation, type IFileUploadConfig, type IMessage, type IReadMessageData, type ISendMessageData, type ITypingData, type IUploadedFile, type IUser, type IWebSocketMessage, MarkdownMessage, MessageItem, MessageList, type MessageStatus, type MessageType, PreChatForm, ThinkingIndicator, type ThinkingIndicatorProps, TypingIndicator, type UseChatWidgetStateOptions, type UseChatWidgetStateReturn, type UseMessagesReturn, fetchMessages, useChatWidgetState, useFileUpload, useMessages, useTypingIndicator, useWebSocket };
|