jibtalk-core 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/dist/index.d.ts +62 -0
- package/dist/jibtalk-core.js +1573 -0
- package/dist/jibtalk-core.umd.cjs +252 -0
- package/package.json +29 -0
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
export declare const STYLES_CSS = "\n#jibtalk-sdk-root {\n position: fixed;\n z-index: 9999;\n font-family: 'Outfit', 'Vazirmatn', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n direction: ltr;\n \n /* Brand colors */\n --primary: #00AC78;\n --secondary: #FF6FA8;\n \n /* Default Dark Mode variables */\n --theme-white: 255, 255, 255;\n --theme-bg: 16, 18, 17;\n --theme-placeholder: 107, 124, 118;\n --theme-hint: 158, 180, 173;\n --theme-surface-elevated: 25, 29, 27;\n --theme-surface-soft: 34, 39, 37;\n --theme-border-soft: 107, 124, 118;\n --theme-backdrop: 0, 0, 0;\n \n --color-white: rgb(var(--theme-white));\n --color-bg: rgb(var(--theme-bg));\n --color-placeholder: rgb(var(--theme-placeholder));\n --color-hint: rgb(var(--theme-hint));\n --color-surface: rgb(var(--theme-surface-elevated));\n --color-surface-soft: rgb(var(--theme-surface-soft));\n --color-border-soft: rgb(var(--theme-border-soft));\n \n --rounded-md: 6px;\n --rounded-lg: 8px;\n --rounded-xl: 12px;\n --rounded-2xl: 16px;\n}\n\n/* Position options */\n#jibtalk-sdk-root.position-bottom-right { bottom: 20px; right: 20px; }\n#jibtalk-sdk-root.position-bottom-left { bottom: 20px; left: 20px; }\n#jibtalk-sdk-root.position-top-right { top: 20px; right: 20px; }\n#jibtalk-sdk-root.position-top-left { top: 20px; left: 20px; }\n\n/* Light theme overrides */\n#jibtalk-sdk-root[data-theme='light'] {\n --theme-white: 27, 36, 32; /* Dark slate text */\n --theme-bg: 242, 247, 245; /* Soft Teal-Gray */\n --theme-placeholder: 122, 141, 133;\n --theme-hint: 83, 100, 92;\n --theme-surface-elevated: 251, 253, 252;\n --theme-surface-soft: 231, 239, 235;\n --theme-border-soft: 180, 197, 190;\n --theme-backdrop: 16, 18, 17;\n}\n\n.jibtalk-sdk-btn {\n background: linear-gradient(135deg, var(--primary), var(--secondary));\n color: white;\n border: none;\n border-radius: 50%;\n width: 60px;\n height: 60px;\n cursor: pointer;\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);\n display: flex;\n align-items: center;\n justify-content: center;\n transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, opacity 0.3s ease-in-out;\n position: relative;\n}\n\n.jibtalk-sdk-btn:hover {\n transform: scale(1.02);\n opacity: 0.9;\n box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.25);\n}\n\n.jibtalk-sdk-unread-badge {\n position: absolute;\n top: -2px;\n right: -2px;\n background-color: var(--secondary);\n color: white;\n border-radius: 50%;\n width: 20px;\n height: 20px;\n font-size: 11px;\n font-weight: 700;\n display: flex;\n align-items: center;\n justify-content: center;\n border: 2px solid var(--color-surface);\n animation: pulse 1.5s infinite;\n}\n\n@keyframes pulse {\n 0% { transform: scale(1); }\n 50% { transform: scale(1.15); }\n 100% { transform: scale(1); }\n}\n\n.jibtalk-sdk-window {\n width: 350px;\n height: 500px;\n background: rgba(var(--theme-surface-elevated), 0.85);\n backdrop-filter: blur(16px);\n -webkit-backdrop-filter: blur(16px);\n border-radius: var(--rounded-2xl);\n box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06), 0 10px 40px rgba(0, 0, 0, 0.15);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n border: 1px solid rgba(var(--theme-border-soft), 0.4);\n animation: jibtalkSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);\n color: var(--color-white);\n}\n\n@keyframes jibtalkSlideUp {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n.jibtalk-sdk-header {\n background: linear-gradient(135deg, var(--primary), var(--secondary));\n color: white;\n padding: 16px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n border-bottom: 1px solid rgba(var(--theme-border-soft), 0.3);\n}\n\n.jibtalk-sdk-header h4 {\n margin: 0;\n font-size: 16px;\n font-weight: 600;\n}\n\n.jibtalk-sdk-close-btn {\n background: none;\n border: none;\n color: white;\n font-size: 24px;\n cursor: pointer;\n line-height: 1;\n opacity: 0.8;\n transition: opacity 0.3s ease-in-out;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n}\n\n.jibtalk-sdk-close-btn:hover {\n opacity: 1;\n}\n\n.jibtalk-sdk-messages {\n flex: 1;\n padding: 16px;\n overflow-y: auto;\n display: flex;\n flex-direction: column;\n gap: 12px;\n background-color: rgba(var(--theme-bg), 0.8);\n scrollbar-width: thin;\n scrollbar-color: var(--primary) transparent;\n}\n\n/* Custom Scrollbar */\n@supports not (scrollbar-color: auto) {\n .jibtalk-sdk-messages::-webkit-scrollbar {\n width: 6px;\n height: 6px;\n }\n .jibtalk-sdk-messages::-webkit-scrollbar-thumb {\n background: var(--primary);\n border-radius: 3px;\n }\n .jibtalk-sdk-messages::-webkit-scrollbar-track {\n background: transparent;\n }\n}\n\n.jibtalk-sdk-message {\n max-width: 80%;\n padding: 10px 14px;\n border-radius: var(--rounded-xl);\n font-size: 14px;\n line-height: 1.4;\n word-wrap: break-word;\n}\n\n.jibtalk-sdk-message-self {\n align-self: flex-end;\n background: linear-gradient(135deg, var(--primary), var(--secondary));\n color: white;\n border-bottom-right-radius: 4px;\n}\n\n.jibtalk-sdk-message-other {\n align-self: flex-start;\n background: var(--color-surface);\n color: var(--color-white);\n border: 1px solid rgba(var(--theme-border-soft), 0.3);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);\n border-bottom-left-radius: 4px;\n}\n\n.jibtalk-sdk-input-area {\n padding: 12px;\n background: rgba(var(--theme-surface-elevated), 0.95);\n display: flex;\n gap: 8px;\n border-top: 1px solid rgba(var(--theme-border-soft), 0.3);\n}\n\n.jibtalk-sdk-input {\n flex: 1;\n padding: 10px 14px;\n border: 1px solid rgba(var(--theme-placeholder), 0.5);\n border-radius: 20px;\n outline: none;\n font-size: 14px;\n background: transparent;\n color: var(--color-white);\n transition: border-color 0.3s ease-in-out;\n}\n\n.jibtalk-sdk-input::placeholder {\n color: rgba(var(--theme-placeholder), 0.8);\n}\n\n.jibtalk-sdk-input:focus {\n border-color: var(--primary);\n}\n\n.jibtalk-sdk-send-btn {\n background: linear-gradient(135deg, var(--primary), var(--secondary));\n color: white;\n border: none;\n border-radius: 20px;\n padding: 0 16px;\n font-weight: 500;\n cursor: pointer;\n transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;\n}\n\n.jibtalk-sdk-send-btn:hover {\n opacity: 0.9;\n transform: scale(1.02);\n}\n";
|
|
2
|
+
export declare const injectStyles: () => void;
|
|
3
|
+
export interface JibTalkUser {
|
|
4
|
+
id: string;
|
|
5
|
+
name?: string;
|
|
6
|
+
email?: string;
|
|
7
|
+
avatar?: string;
|
|
8
|
+
metadata?: Record<string, unknown>;
|
|
9
|
+
}
|
|
10
|
+
export interface JibTalkOptions {
|
|
11
|
+
apiKey: string;
|
|
12
|
+
locale?: string;
|
|
13
|
+
theme?: 'light' | 'dark';
|
|
14
|
+
position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
|
|
15
|
+
primaryColor?: string;
|
|
16
|
+
customer?: JibTalkUser;
|
|
17
|
+
conversationId?: string;
|
|
18
|
+
timestamp?: number;
|
|
19
|
+
signature?: string;
|
|
20
|
+
}
|
|
21
|
+
export type JibTalkEvent = 'connected' | 'disconnected' | 'messageSent' | 'messageReceived' | 'conversationOpened' | 'conversationClosed' | 'typingStarted' | 'typingStopped' | 'stateChange';
|
|
22
|
+
export declare class JibTalkCore {
|
|
23
|
+
private socket;
|
|
24
|
+
private apiKey;
|
|
25
|
+
private backendUrl;
|
|
26
|
+
private visitorId;
|
|
27
|
+
private listeners;
|
|
28
|
+
isOpen: boolean;
|
|
29
|
+
isConnected: boolean;
|
|
30
|
+
unreadCount: number;
|
|
31
|
+
currentConversation: any;
|
|
32
|
+
messages: any[];
|
|
33
|
+
theme: 'light' | 'dark';
|
|
34
|
+
position: string;
|
|
35
|
+
primaryColor: string;
|
|
36
|
+
locale: string;
|
|
37
|
+
constructor(options: JibTalkOptions);
|
|
38
|
+
private getVisitorId;
|
|
39
|
+
connect(): void;
|
|
40
|
+
private initWidget;
|
|
41
|
+
open(options?: {
|
|
42
|
+
customer?: JibTalkUser;
|
|
43
|
+
conversationId?: string;
|
|
44
|
+
timestamp?: number;
|
|
45
|
+
signature?: string;
|
|
46
|
+
}): void;
|
|
47
|
+
close(): void;
|
|
48
|
+
toggle(): void;
|
|
49
|
+
destroy(): void;
|
|
50
|
+
identify(user: JibTalkUser, timestamp?: number, signature?: string): void;
|
|
51
|
+
setUser(user: JibTalkUser, timestamp?: number, signature?: string): void;
|
|
52
|
+
logout(): void;
|
|
53
|
+
sendMessage(content: string): void;
|
|
54
|
+
startTyping(): void;
|
|
55
|
+
stopTyping(): void;
|
|
56
|
+
on(event: JibTalkEvent, callback: Function): void;
|
|
57
|
+
off(event: JibTalkEvent, callback: Function): void;
|
|
58
|
+
private emit;
|
|
59
|
+
private emitStateChange;
|
|
60
|
+
updateOptions(options: Partial<JibTalkOptions>): void;
|
|
61
|
+
}
|
|
62
|
+
export declare const getJibTalkInstance: (options?: JibTalkOptions) => JibTalkCore | null;
|