@diffsome/react 1.2.2 → 1.2.4

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/chat.css ADDED
@@ -0,0 +1,396 @@
1
+ /* Diffsome Chat - CSS Variables */
2
+ .diffsome-chat-bubble-container {
3
+ --diffsome-chat-primary: #6366f1;
4
+ --diffsome-chat-primary-dark: color-mix(in srgb, var(--diffsome-chat-primary) 85%, black);
5
+ --diffsome-chat-bg: #ffffff;
6
+ --diffsome-chat-text: #1f2937;
7
+ --diffsome-chat-text-muted: #6b7280;
8
+ --diffsome-chat-border: #e5e7eb;
9
+ --diffsome-chat-visitor-bg: var(--diffsome-chat-primary);
10
+ --diffsome-chat-visitor-text: #ffffff;
11
+ --diffsome-chat-agent-bg: #f3f4f6;
12
+ --diffsome-chat-agent-text: #1f2937;
13
+ --diffsome-chat-radius: 12px;
14
+ --diffsome-chat-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
15
+
16
+ position: fixed;
17
+ bottom: 20px;
18
+ display: flex;
19
+ flex-direction: column;
20
+ align-items: flex-end;
21
+ gap: 16px;
22
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
23
+ }
24
+
25
+ .diffsome-chat-bubble-right {
26
+ right: 20px;
27
+ }
28
+
29
+ .diffsome-chat-bubble-left {
30
+ left: 20px;
31
+ align-items: flex-start;
32
+ }
33
+
34
+ /* Floating Button */
35
+ .diffsome-chat-bubble-button {
36
+ width: 60px;
37
+ height: 60px;
38
+ border-radius: 50%;
39
+ border: none;
40
+ background: var(--diffsome-chat-primary);
41
+ color: white;
42
+ cursor: pointer;
43
+ display: flex;
44
+ align-items: center;
45
+ justify-content: center;
46
+ box-shadow: var(--diffsome-chat-shadow);
47
+ transition: transform 0.2s ease, background-color 0.2s ease;
48
+ position: relative;
49
+ }
50
+
51
+ .diffsome-chat-bubble-button:hover {
52
+ transform: scale(1.05);
53
+ background: var(--diffsome-chat-primary-dark);
54
+ }
55
+
56
+ .diffsome-chat-bubble-button:active {
57
+ transform: scale(0.95);
58
+ }
59
+
60
+ .diffsome-chat-bubble-button-open {
61
+ background: #6b7280;
62
+ }
63
+
64
+ .diffsome-chat-bubble-button-open:hover {
65
+ background: #4b5563;
66
+ }
67
+
68
+ .diffsome-chat-bubble-badge {
69
+ position: absolute;
70
+ top: -5px;
71
+ right: -5px;
72
+ background: #ef4444;
73
+ color: white;
74
+ font-size: 12px;
75
+ font-weight: 600;
76
+ min-width: 20px;
77
+ height: 20px;
78
+ border-radius: 10px;
79
+ display: flex;
80
+ align-items: center;
81
+ justify-content: center;
82
+ padding: 0 6px;
83
+ }
84
+
85
+ /* Chat Widget */
86
+ .diffsome-chat-widget {
87
+ width: 380px;
88
+ max-width: calc(100vw - 40px);
89
+ height: 500px;
90
+ max-height: calc(100vh - 120px);
91
+ background: var(--diffsome-chat-bg);
92
+ border-radius: var(--diffsome-chat-radius);
93
+ box-shadow: var(--diffsome-chat-shadow);
94
+ display: flex;
95
+ flex-direction: column;
96
+ overflow: hidden;
97
+ animation: diffsome-chat-slide-up 0.3s ease;
98
+ }
99
+
100
+ @keyframes diffsome-chat-slide-up {
101
+ from {
102
+ opacity: 0;
103
+ transform: translateY(20px);
104
+ }
105
+ to {
106
+ opacity: 1;
107
+ transform: translateY(0);
108
+ }
109
+ }
110
+
111
+ /* Header */
112
+ .diffsome-chat-header {
113
+ background: var(--diffsome-chat-primary);
114
+ color: white;
115
+ padding: 16px 20px;
116
+ display: flex;
117
+ align-items: center;
118
+ justify-content: space-between;
119
+ }
120
+
121
+ .diffsome-chat-header-info {
122
+ flex: 1;
123
+ }
124
+
125
+ .diffsome-chat-header-title {
126
+ font-size: 16px;
127
+ font-weight: 600;
128
+ margin-bottom: 2px;
129
+ }
130
+
131
+ .diffsome-chat-header-subtitle {
132
+ font-size: 13px;
133
+ opacity: 0.9;
134
+ }
135
+
136
+ .diffsome-chat-header-close {
137
+ background: none;
138
+ border: none;
139
+ color: white;
140
+ cursor: pointer;
141
+ padding: 4px;
142
+ border-radius: 4px;
143
+ display: flex;
144
+ align-items: center;
145
+ justify-content: center;
146
+ opacity: 0.8;
147
+ transition: opacity 0.2s ease;
148
+ }
149
+
150
+ .diffsome-chat-header-close:hover {
151
+ opacity: 1;
152
+ }
153
+
154
+ /* Messages Container */
155
+ .diffsome-chat-messages {
156
+ flex: 1;
157
+ overflow-y: auto;
158
+ padding: 16px;
159
+ display: flex;
160
+ flex-direction: column;
161
+ gap: 12px;
162
+ }
163
+
164
+ .diffsome-chat-loading,
165
+ .diffsome-chat-empty {
166
+ display: flex;
167
+ flex-direction: column;
168
+ align-items: center;
169
+ justify-content: center;
170
+ height: 100%;
171
+ color: var(--diffsome-chat-text-muted);
172
+ font-size: 14px;
173
+ gap: 12px;
174
+ }
175
+
176
+ .diffsome-chat-loading-spinner {
177
+ width: 32px;
178
+ height: 32px;
179
+ border: 3px solid var(--diffsome-chat-border);
180
+ border-top-color: var(--diffsome-chat-primary);
181
+ border-radius: 50%;
182
+ animation: diffsome-chat-spin 0.8s linear infinite;
183
+ }
184
+
185
+ @keyframes diffsome-chat-spin {
186
+ to {
187
+ transform: rotate(360deg);
188
+ }
189
+ }
190
+
191
+ /* Message Bubbles */
192
+ .diffsome-chat-message {
193
+ display: flex;
194
+ flex-direction: column;
195
+ max-width: 80%;
196
+ }
197
+
198
+ .diffsome-chat-message-visitor {
199
+ align-self: flex-end;
200
+ align-items: flex-end;
201
+ }
202
+
203
+ .diffsome-chat-message-agent {
204
+ align-self: flex-start;
205
+ align-items: flex-start;
206
+ }
207
+
208
+ .diffsome-chat-message-sender {
209
+ font-size: 12px;
210
+ color: var(--diffsome-chat-text-muted);
211
+ margin-bottom: 4px;
212
+ padding-left: 12px;
213
+ }
214
+
215
+ .diffsome-chat-message-bubble {
216
+ padding: 10px 14px;
217
+ border-radius: 18px;
218
+ word-wrap: break-word;
219
+ }
220
+
221
+ .diffsome-chat-message-visitor .diffsome-chat-message-bubble {
222
+ background: var(--diffsome-chat-visitor-bg);
223
+ color: var(--diffsome-chat-visitor-text);
224
+ border-bottom-right-radius: 4px;
225
+ }
226
+
227
+ .diffsome-chat-message-agent .diffsome-chat-message-bubble {
228
+ background: var(--diffsome-chat-agent-bg);
229
+ color: var(--diffsome-chat-agent-text);
230
+ border-bottom-left-radius: 4px;
231
+ }
232
+
233
+ .diffsome-chat-message-content {
234
+ font-size: 14px;
235
+ line-height: 1.4;
236
+ white-space: pre-wrap;
237
+ }
238
+
239
+ .diffsome-chat-message-time {
240
+ font-size: 11px;
241
+ margin-top: 4px;
242
+ opacity: 0.7;
243
+ }
244
+
245
+ .diffsome-chat-message-read {
246
+ color: #10b981;
247
+ }
248
+
249
+ /* System Message */
250
+ .diffsome-chat-message-system {
251
+ align-self: center;
252
+ background: var(--diffsome-chat-border);
253
+ color: var(--diffsome-chat-text-muted);
254
+ font-size: 12px;
255
+ padding: 6px 12px;
256
+ border-radius: 12px;
257
+ }
258
+
259
+ /* Typing Indicator */
260
+ .diffsome-chat-typing {
261
+ display: flex;
262
+ align-items: center;
263
+ gap: 8px;
264
+ color: var(--diffsome-chat-text-muted);
265
+ font-size: 13px;
266
+ }
267
+
268
+ .diffsome-chat-typing-indicator {
269
+ display: flex;
270
+ gap: 4px;
271
+ }
272
+
273
+ .diffsome-chat-typing-indicator span {
274
+ width: 8px;
275
+ height: 8px;
276
+ background: var(--diffsome-chat-text-muted);
277
+ border-radius: 50%;
278
+ animation: diffsome-chat-typing-bounce 1.4s ease-in-out infinite;
279
+ }
280
+
281
+ .diffsome-chat-typing-indicator span:nth-child(1) {
282
+ animation-delay: 0s;
283
+ }
284
+
285
+ .diffsome-chat-typing-indicator span:nth-child(2) {
286
+ animation-delay: 0.2s;
287
+ }
288
+
289
+ .diffsome-chat-typing-indicator span:nth-child(3) {
290
+ animation-delay: 0.4s;
291
+ }
292
+
293
+ @keyframes diffsome-chat-typing-bounce {
294
+ 0%, 60%, 100% {
295
+ transform: translateY(0);
296
+ opacity: 0.4;
297
+ }
298
+ 30% {
299
+ transform: translateY(-4px);
300
+ opacity: 1;
301
+ }
302
+ }
303
+
304
+ /* Input */
305
+ .diffsome-chat-input {
306
+ display: flex;
307
+ align-items: flex-end;
308
+ gap: 8px;
309
+ padding: 12px 16px;
310
+ border-top: 1px solid var(--diffsome-chat-border);
311
+ background: var(--diffsome-chat-bg);
312
+ }
313
+
314
+ .diffsome-chat-input-field {
315
+ flex: 1;
316
+ border: 1px solid var(--diffsome-chat-border);
317
+ border-radius: 20px;
318
+ padding: 10px 16px;
319
+ font-size: 14px;
320
+ resize: none;
321
+ outline: none;
322
+ font-family: inherit;
323
+ line-height: 1.4;
324
+ max-height: 100px;
325
+ transition: border-color 0.2s ease;
326
+ }
327
+
328
+ .diffsome-chat-input-field:focus {
329
+ border-color: var(--diffsome-chat-primary);
330
+ }
331
+
332
+ .diffsome-chat-input-field::placeholder {
333
+ color: var(--diffsome-chat-text-muted);
334
+ }
335
+
336
+ .diffsome-chat-input-button {
337
+ width: 40px;
338
+ height: 40px;
339
+ border-radius: 50%;
340
+ border: none;
341
+ background: var(--diffsome-chat-primary);
342
+ color: white;
343
+ cursor: pointer;
344
+ display: flex;
345
+ align-items: center;
346
+ justify-content: center;
347
+ transition: background-color 0.2s ease, opacity 0.2s ease;
348
+ flex-shrink: 0;
349
+ }
350
+
351
+ .diffsome-chat-input-button:hover:not(:disabled) {
352
+ background: var(--diffsome-chat-primary-dark);
353
+ }
354
+
355
+ .diffsome-chat-input-button:disabled {
356
+ opacity: 0.5;
357
+ cursor: not-allowed;
358
+ }
359
+
360
+ /* Mobile Responsive */
361
+ @media (max-width: 480px) {
362
+ .diffsome-chat-widget {
363
+ width: 100vw;
364
+ height: 100vh;
365
+ max-width: 100vw;
366
+ max-height: 100vh;
367
+ border-radius: 0;
368
+ position: fixed;
369
+ top: 0;
370
+ left: 0;
371
+ right: 0;
372
+ bottom: 0;
373
+ }
374
+
375
+ .diffsome-chat-bubble-container {
376
+ bottom: 16px;
377
+ right: 16px;
378
+ }
379
+
380
+ .diffsome-chat-bubble-left {
381
+ left: 16px;
382
+ right: auto;
383
+ }
384
+ }
385
+
386
+ /* Dark mode support */
387
+ @media (prefers-color-scheme: dark) {
388
+ .diffsome-chat-bubble-container {
389
+ --diffsome-chat-bg: #1f2937;
390
+ --diffsome-chat-text: #f9fafb;
391
+ --diffsome-chat-text-muted: #9ca3af;
392
+ --diffsome-chat-border: #374151;
393
+ --diffsome-chat-agent-bg: #374151;
394
+ --diffsome-chat-agent-text: #f9fafb;
395
+ }
396
+ }
package/dist/index.d.mts CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import * as react from 'react';
3
- import { ReactNode } from 'react';
4
- import { Diffsome, Cart, WishlistItem, DiffsomeConfig, CurrencyInfo, SiteInfo, Member, LoginCredentials, AuthResponse, RegisterData, UpdateProfileData, ResetPasswordData, SocialProvider, WishlistToggleResult, WishlistMoveToCartResult, BundlePricing, ProductCategory, Product, PaginationMeta, ProductListParams, ProductType, CreateOrderData, Order, OrderListParams, PaymentStatusResponse, StripeCheckoutResponse, StripeVerifyResponse, TossPaymentReadyResponse, TossPaymentConfirmResponse, Coupon, CouponValidation, MemberSubscription, DigitalDownloadLink, CanReviewResponse, CreateProductReviewData, ProductReview, UpdateProductReviewData, ProductReviewStats, ProductReviewListParams, BlogCategory, BlogListParams, BlogPost, BoardPost, Board, CreateBoardPostData, BoardPostListParams, BoardListParams, Comment, CreateCommentData, Form, FormSubmissionData, FormSubmission, ReservationSlot, CreateReservationData, Reservation, ReservationService, ReservationSettings, ReservationStaff, ReservationListParams, Media, CustomEntity, EntityRecord, EntityListParams } from '@diffsome/sdk';
2
+ import * as React from 'react';
3
+ import React__default, { ReactNode } from 'react';
4
+ import { Diffsome, Cart, WishlistItem, DiffsomeConfig, CurrencyInfo, SiteInfo, Member, LoginCredentials, AuthResponse, RegisterData, UpdateProfileData, ResetPasswordData, SocialProvider, WishlistToggleResult, WishlistMoveToCartResult, BundlePricing, ProductCategory, Product, PaginationMeta, ProductListParams, ProductType, CreateOrderData, Order, OrderListParams, PaymentStatusResponse, StripeCheckoutResponse, StripeVerifyResponse, TossPaymentReadyResponse, TossPaymentConfirmResponse, Coupon, CouponValidation, MemberSubscription, DigitalDownloadLink, CanReviewResponse, CreateProductReviewData, ProductReview, UpdateProductReviewData, ProductReviewStats, ProductReviewListParams, BlogCategory, BlogListParams, BlogPost, BoardPost, Board, CreateBoardPostData, BoardPostListParams, BoardListParams, Comment, CreateCommentData, Form, FormSubmissionData, FormSubmission, ReservationSlot, CreateReservationData, Reservation, ReservationService, ReservationSettings, ReservationStaff, ReservationListParams, Media, CustomEntity, EntityRecord, EntityListParams, ChatConversation, ChatMessage as ChatMessage$1 } from '@diffsome/sdk';
5
5
  export { AddToCartData, AuthResponse, BlogCategory, BlogListParams, BlogPost, Board, BoardListParams, BoardPost, BoardPostListParams, CanReviewResponse, Cart, CartItem, Comment, Coupon, CouponType, CouponValidation, CreateBoardPostData, CreateCommentData, CreateOrderData, CreateProductReviewData, CreateReservationData, CustomEntity, DiffsomeConfig, DigitalDownloadLink, DigitalFile, EntityField, EntityListParams, EntityRecord, EntitySchema, Form, FormSubmission, FormSubmissionData, ListResponse, LoginCredentials, Media, Member, MemberSubscription, Order, OrderItem, OrderListParams, OrderStatus, PaginatedResponse, PaginationMeta, Payment, PaymentMethod, PaymentStatus, PaymentStatusResponse, Product, ProductCategory, ProductListParams, ProductReview, ProductReviewStats, ProductType, ProductVariant, RegisterData, Reservation, ReservationService, ReservationSettings, ReservationSlot, ReservationStaff, ResetPasswordData, SiteInfo, SocialAuthUrl, SocialProvider, StripeCheckoutResponse, StripeVerifyResponse, SubscriptionInterval, SubscriptionPlan, SubscriptionStatus, TossPaymentConfirmResponse, TossPaymentReadyResponse, UpdateProfileData, WishlistItem, WishlistMoveToCartResult, WishlistToggleResult } from '@diffsome/sdk';
6
6
 
7
7
  interface DiffsomeContextValue {
@@ -16,7 +16,7 @@ interface DiffsomeContextValue {
16
16
  setWishlistItems: (items: WishlistItem[]) => void;
17
17
  refreshWishlist: () => Promise<void>;
18
18
  }
19
- declare const DiffsomeContext: react.Context<DiffsomeContextValue | null>;
19
+ declare const DiffsomeContext: React.Context<DiffsomeContextValue | null>;
20
20
  interface DiffsomeProviderProps {
21
21
  children: ReactNode;
22
22
  config?: Partial<DiffsomeConfig>;
@@ -757,6 +757,46 @@ declare function useTypedEntity<T extends Record<string, any>>(slug: string): {
757
757
  delete: (id: number) => Promise<void>;
758
758
  };
759
759
 
760
+ interface UseChatOptions {
761
+ /** Auto-connect when hook mounts */
762
+ autoConnect?: boolean;
763
+ /** Visitor name */
764
+ visitorName?: string;
765
+ /** Visitor email */
766
+ visitorEmail?: string;
767
+ /** Initial greeting message */
768
+ greeting?: string;
769
+ }
770
+ interface UseChatReturn {
771
+ /** Current conversation */
772
+ conversation: ChatConversation | null;
773
+ /** Messages in the conversation */
774
+ messages: ChatMessage$1[];
775
+ /** Whether chat is loading */
776
+ loading: boolean;
777
+ /** Error if any */
778
+ error: Error | null;
779
+ /** Whether connection is active */
780
+ connected: boolean;
781
+ /** Whether agent is typing */
782
+ agentTyping: boolean;
783
+ /** Start a new conversation */
784
+ start: (options?: {
785
+ visitorName?: string;
786
+ visitorEmail?: string;
787
+ greeting?: string;
788
+ }) => Promise<void>;
789
+ /** Send a message */
790
+ send: (content: string) => Promise<void>;
791
+ /** Send typing indicator */
792
+ sendTyping: () => void;
793
+ /** Close the conversation */
794
+ close: () => Promise<void>;
795
+ /** Disconnect from real-time updates */
796
+ disconnect: () => void;
797
+ }
798
+ declare function useChat(options?: UseChatOptions): UseChatReturn;
799
+
760
800
  interface RichContentProps {
761
801
  /** HTML content from CMS/Editor */
762
802
  html: string;
@@ -797,4 +837,100 @@ interface RichContentProps {
797
837
  */
798
838
  declare function RichContent({ html, className, prose, proseVariant, proseSize, maxWidth, }: RichContentProps): react_jsx_runtime.JSX.Element;
799
839
 
800
- export { type CommentType, DiffsomeContext, type DiffsomeContextValue, DiffsomeProvider, type DiffsomeProviderProps, RichContent, type RichContentProps, type UseAuthReturn, type UseAvailableSlotsReturn, type UseBlogCategoriesReturn, type UseBlogOptions, type UseBlogPostReturn, type UseBlogReturn, type UseBlogSearchReturn, type UseBlogTagsReturn, type UseBoardPostReturn, type UseBoardPostsReturn, type UseBoardReturn, type UseBoardsReturn, type UseBundleItemsReturn, type UseCanReviewReturn, type UseCartReturn, type UseCategoriesReturn, type UseCommentsOptions, type UseCommentsReturn, type UseCouponsReturn, type UseCreateBoardPostReturn, type UseCreateOrderReturn, type UseCreateReservationReturn, type UseCreateReviewReturn, type UseCreateSubscriptionReturn, type UseCurrencyReturn, type UseDownloadsReturn, type UseEntitiesReturn, type UseEntityRecordReturn, type UseEntityRecordsReturn, type UseEntityReturn, type UseFeaturedBlogReturn, type UseFeaturedProductsReturn, type UseFormReturn, type UseMediaOptions, type UseMediaReturn, type UseMyReservationsReturn, type UseMyReviewsReturn, type UseOrderDownloadsReturn, type UseOrderReturn, type UseOrdersReturn, type UsePaymentStatusReturn, type UseProductReturn, type UseProductReviewsReturn, type UseProductsByTypeReturn, type UseProductsOptions, type UseProductsReturn, type UseReservationServicesReturn, type UseReservationSettingsReturn, type UseReservationStaffsReturn, type UseSiteReturn, type UseSocialAuthReturn, type UseStripePaymentReturn, type UseSubscriptionReturn, type UseSubscriptionsReturn, type UseTossPaymentReturn, type UseValidateCouponReturn, type UseWishlistReturn, useAuth, useAvailableSlots, useBlog, useBlogCategories, useBlogPost, useBlogSearch, useBlogTags, useBoard, useBoardPost, useBoardPosts, useBoards, useBundleItems, useBundleProducts, useCanReview, useCart, useCategories, useClient, useComments, useCoupons, useCreateBoardPost, useCreateOrder, useCreateReservation, useCreateReview, useCreateSubscription, useCurrency, useDiffsome, useDigitalProducts, useDownloads, useEntities, useEntity, useEntityRecord, useEntityRecords, useFeaturedBlog, useFeaturedProducts, useForm, useMedia, useMyReservations, useMyReviews, useOrder, useOrderDownloads, useOrders, usePaymentStatus, useProduct, useProductReviews, useProducts, useProductsByType, useReservationServices, useReservationSettings, useReservationStaffs, useSite, useSocialAuth, useStripePayment, useSubscription, useSubscriptionProducts, useSubscriptions, useTossPayment, useTypedEntity, useValidateCoupon, useWishlist };
840
+ interface Message {
841
+ id: number;
842
+ content: string;
843
+ senderType: 'visitor' | 'agent' | 'system';
844
+ senderName?: string;
845
+ timestamp?: string;
846
+ isRead?: boolean;
847
+ }
848
+ interface ChatWidgetProps {
849
+ messages: Message[];
850
+ onSend: (message: string) => void;
851
+ onTyping?: () => void;
852
+ onClose?: () => void;
853
+ title?: string;
854
+ subtitle?: string;
855
+ placeholder?: string;
856
+ loading?: boolean;
857
+ typing?: boolean;
858
+ className?: string;
859
+ }
860
+ declare const ChatWidget: React__default.FC<ChatWidgetProps>;
861
+
862
+ interface ChatBubbleProps {
863
+ /** Diffsome SDK client instance */
864
+ client: {
865
+ chat: {
866
+ start: (data?: {
867
+ visitor_name?: string;
868
+ visitor_email?: string;
869
+ initial_message?: string;
870
+ }) => Promise<{
871
+ conversation_id: number;
872
+ visitor_id: string;
873
+ }>;
874
+ connect: (conversationId: number) => {
875
+ send: (content: string) => Promise<unknown>;
876
+ getMessages: () => Promise<Message[]>;
877
+ onMessage: (callback: (msg: Message) => void) => () => void;
878
+ onTyping: (callback: (senderType: string) => void) => () => void;
879
+ sendTyping: () => void;
880
+ disconnect: () => void;
881
+ };
882
+ checkAvailability: () => Promise<{
883
+ available: boolean;
884
+ agents_online: number;
885
+ }>;
886
+ };
887
+ };
888
+ /** Chat widget title */
889
+ title?: string;
890
+ /** Chat widget subtitle */
891
+ subtitle?: string;
892
+ /** Input placeholder text */
893
+ placeholder?: string;
894
+ /** Visitor name */
895
+ visitorName?: string;
896
+ /** Visitor email */
897
+ visitorEmail?: string;
898
+ /** Initial greeting message from visitor */
899
+ greeting?: string;
900
+ /** Primary color */
901
+ primaryColor?: string;
902
+ /** Position of the bubble */
903
+ position?: 'bottom-right' | 'bottom-left';
904
+ /** Z-index for the widget */
905
+ zIndex?: number;
906
+ /** Whether to show unread badge */
907
+ showUnreadBadge?: boolean;
908
+ /** Custom class name */
909
+ className?: string;
910
+ /** Callback when chat is opened */
911
+ onOpen?: () => void;
912
+ /** Callback when chat is closed */
913
+ onClose?: () => void;
914
+ }
915
+ declare const ChatBubble: React__default.FC<ChatBubbleProps>;
916
+
917
+ interface ChatMessageProps {
918
+ content: string;
919
+ senderType: 'visitor' | 'agent' | 'system';
920
+ senderName?: string;
921
+ timestamp?: string;
922
+ isRead?: boolean;
923
+ className?: string;
924
+ }
925
+ declare const ChatMessage: React__default.FC<ChatMessageProps>;
926
+
927
+ interface ChatInputProps {
928
+ onSend: (message: string) => void;
929
+ onTyping?: () => void;
930
+ placeholder?: string;
931
+ disabled?: boolean;
932
+ className?: string;
933
+ }
934
+ declare const ChatInput: React__default.FC<ChatInputProps>;
935
+
936
+ export { ChatBubble, type ChatBubbleProps, ChatInput, type ChatInputProps, ChatMessage, type ChatMessageProps, ChatWidget, type ChatWidgetProps, type CommentType, DiffsomeContext, type DiffsomeContextValue, DiffsomeProvider, type DiffsomeProviderProps, type Message, RichContent, type RichContentProps, type UseAuthReturn, type UseAvailableSlotsReturn, type UseBlogCategoriesReturn, type UseBlogOptions, type UseBlogPostReturn, type UseBlogReturn, type UseBlogSearchReturn, type UseBlogTagsReturn, type UseBoardPostReturn, type UseBoardPostsReturn, type UseBoardReturn, type UseBoardsReturn, type UseBundleItemsReturn, type UseCanReviewReturn, type UseCartReturn, type UseCategoriesReturn, type UseChatOptions, type UseChatReturn, type UseCommentsOptions, type UseCommentsReturn, type UseCouponsReturn, type UseCreateBoardPostReturn, type UseCreateOrderReturn, type UseCreateReservationReturn, type UseCreateReviewReturn, type UseCreateSubscriptionReturn, type UseCurrencyReturn, type UseDownloadsReturn, type UseEntitiesReturn, type UseEntityRecordReturn, type UseEntityRecordsReturn, type UseEntityReturn, type UseFeaturedBlogReturn, type UseFeaturedProductsReturn, type UseFormReturn, type UseMediaOptions, type UseMediaReturn, type UseMyReservationsReturn, type UseMyReviewsReturn, type UseOrderDownloadsReturn, type UseOrderReturn, type UseOrdersReturn, type UsePaymentStatusReturn, type UseProductReturn, type UseProductReviewsReturn, type UseProductsByTypeReturn, type UseProductsOptions, type UseProductsReturn, type UseReservationServicesReturn, type UseReservationSettingsReturn, type UseReservationStaffsReturn, type UseSiteReturn, type UseSocialAuthReturn, type UseStripePaymentReturn, type UseSubscriptionReturn, type UseSubscriptionsReturn, type UseTossPaymentReturn, type UseValidateCouponReturn, type UseWishlistReturn, useAuth, useAvailableSlots, useBlog, useBlogCategories, useBlogPost, useBlogSearch, useBlogTags, useBoard, useBoardPost, useBoardPosts, useBoards, useBundleItems, useBundleProducts, useCanReview, useCart, useCategories, useChat, useClient, useComments, useCoupons, useCreateBoardPost, useCreateOrder, useCreateReservation, useCreateReview, useCreateSubscription, useCurrency, useDiffsome, useDigitalProducts, useDownloads, useEntities, useEntity, useEntityRecord, useEntityRecords, useFeaturedBlog, useFeaturedProducts, useForm, useMedia, useMyReservations, useMyReviews, useOrder, useOrderDownloads, useOrders, usePaymentStatus, useProduct, useProductReviews, useProducts, useProductsByType, useReservationServices, useReservationSettings, useReservationStaffs, useSite, useSocialAuth, useStripePayment, useSubscription, useSubscriptionProducts, useSubscriptions, useTossPayment, useTypedEntity, useValidateCoupon, useWishlist };