@buni.ai/chatbot-core 1.0.12 → 1.0.13

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 (6) hide show
  1. package/dist/index.esm.js +387 -259
  2. package/dist/index.esm.js.map +1 -1
  3. package/dist/index.js +387 -259
  4. package/dist/index.js.map +1 -1
  5. package/dist/widget.d.ts +5 -1
  6. package/package.json +1 -1
package/dist/index.esm.js CHANGED
@@ -9,7 +9,8 @@ class BuniChatWidget {
9
9
  };
10
10
  this.eventListeners = new Map();
11
11
  this.widgetElement = null;
12
- this.iframe = null;
12
+ this.triggerIframe = null;
13
+ this.chatIframe = null;
13
14
  this.customerData = null;
14
15
  this.sessionVariables = null;
15
16
  }
@@ -55,193 +56,373 @@ class BuniChatWidget {
55
56
  };
56
57
  const widthValue = ensureUnits(config.width, "350px");
57
58
  const heightValue = ensureUnits(config.height, "650px");
58
- // Check if widget should start minimized
59
- const shouldStartMinimized = config.initialMinimized === true;
59
+ // Configuration
60
60
  const showTriggerText = config.showTriggerText !== false;
61
61
  const hasTriggerText = !!config.triggerText;
62
- // Responsive breakpoints following mobile-first best practices
62
+ const primaryColor = config.primaryColor || "#795548";
63
+ const triggerText = config.triggerText || "";
64
+ const companyName = config.companyName || "Chat Support";
65
+ // Responsive breakpoints
63
66
  const isMobile = window.innerWidth <= 768;
64
- const isExtraSmall = window.innerWidth <= 375;
65
- const isTablet = window.innerWidth > 768 && window.innerWidth <= 1024;
66
- // Calculate initial dimensions based on minimized state with responsive scaling
67
- // Mobile-first approach: Full viewport on mobile, constrained on desktop
68
- const initialWidth = shouldStartMinimized
69
- ? showTriggerText && hasTriggerText
70
- ? "auto"
71
- : "52px"
72
- : isExtraSmall
73
- ? "100vw" // Full width on very small devices
74
- : isMobile
75
- ? "min(100vw, 370px)" // Constrained width on mobile
76
- : isTablet
77
- ? "min(calc(100vw - 3rem), 370px)" // Slightly smaller on tablets
78
- : widthValue; // Custom width on desktop
79
- const initialHeight = shouldStartMinimized
80
- ? "52px"
81
- : isExtraSmall
82
- ? "100vh" // Full height on very small devices
83
- : isMobile
84
- ? "min(100vh, 600px)" // Constrained height on mobile
85
- : isTablet
86
- ? "min(calc(100vh - 3rem), 620px)" // Slightly smaller on tablets
87
- : heightValue; // Custom height on desktop
88
- const initialMinWidth = shouldStartMinimized && showTriggerText && hasTriggerText ? "auto" : "";
89
- // Use CSS custom properties for dynamic styling
67
+ // Calculate trigger dimensions
68
+ const triggerWidth = showTriggerText && hasTriggerText ? "auto" : "52px";
69
+ const triggerHeight = "52px";
70
+ const triggerMinWidth = showTriggerText && hasTriggerText ? "auto" : "";
71
+ // Container starts as trigger size
90
72
  container.style.cssText = `
91
73
  position: fixed;
92
74
  pointer-events: none;
93
75
  z-index: 999999;
94
- width: ${initialWidth};
95
- height: ${initialHeight};
96
- ${initialMinWidth ? `min-width: ${initialMinWidth};` : ""}
97
- ${isMobile && !shouldStartMinimized ? "max-width: 100vw; max-height: 100vh;" : ""}
76
+ width: ${triggerWidth};
77
+ height: ${triggerHeight};
78
+ ${triggerMinWidth ? `min-width: ${triggerMinWidth};` : ""}
98
79
  transition: width 0.3s ease, height 0.3s ease, border-radius 0.3s ease;
99
- ${this.getPositionStyles(config.position || "bottom-right", shouldStartMinimized)}
80
+ ${this.getPositionStyles(config.position || "bottom-right", true)}
100
81
  display: ${config.hideDefaultTrigger ? "none" : "block"};
101
- overflow: ${shouldStartMinimized ? "hidden" : "visible"};
82
+ overflow: hidden;
102
83
  box-sizing: border-box;
103
84
  `;
104
- // Create iframe for secure embedding
105
- const iframe = document.createElement("iframe");
106
- // Build URL with configuration parameters
107
- const params = new URLSearchParams({
108
- token: this.options.token,
109
- embedded: "true", // Enable postMessage communication
110
- source: "package",
111
- framework: this.options.framework || "vanilla",
112
- });
113
- // Add string parameters only if provided
114
- if (config.theme)
115
- params.set("theme", config.theme);
116
- if (config.primaryColor)
117
- params.set("primaryColor", config.primaryColor);
118
- if (config.secondaryColor)
119
- params.set("secondaryColor", config.secondaryColor);
120
- if (config.position)
121
- params.set("position", config.position);
122
- if (widthValue && config.width !== undefined)
123
- params.set("width", widthValue);
124
- if (heightValue && config.height !== undefined)
125
- params.set("height", heightValue);
126
- if (config.customAvatar)
127
- params.set("customAvatar", config.customAvatar);
128
- if (config.companyName)
129
- params.set("companyName", config.companyName);
130
- if (config.welcomeMessage)
131
- params.set("welcomeMessage", config.welcomeMessage);
132
- if (config.triggerText)
133
- params.set("triggerText", config.triggerText);
134
- if (config.borderRadius)
135
- params.set("borderRadius", config.borderRadius);
136
- if (config.avatarType)
137
- params.set("avatarType", config.avatarType);
138
- if (config.avatarText)
139
- params.set("avatarText", config.avatarText);
140
- // Boolean options - only pass if explicitly defined
141
- if (config.showBranding !== undefined) {
142
- params.set("showBranding", String(config.showBranding));
143
- }
144
- if (config.autoOpen !== undefined) {
145
- params.set("autoOpen", String(config.autoOpen));
146
- }
147
- if (config.minimized !== undefined) {
148
- params.set("minimized", String(config.minimized));
149
- }
150
- if (config.initialMinimized !== undefined) {
151
- params.set("initialMinimized", String(config.initialMinimized));
152
- }
153
- if (config.allowMinimize !== undefined) {
154
- params.set("allowMinimize", String(config.allowMinimize));
155
- }
156
- if (config.showMinimize !== undefined) {
157
- params.set("showMinimize", String(config.showMinimize));
158
- }
159
- if (config.allowClose !== undefined) {
160
- params.set("allowClose", String(config.allowClose));
161
- }
162
- if (config.enableFileUpload !== undefined) {
163
- params.set("enableFileUpload", String(config.enableFileUpload));
164
- }
165
- if (config.showTimestamps !== undefined) {
166
- params.set("showTimestamps", String(config.showTimestamps));
167
- }
168
- if (config.showTriggerText !== undefined) {
169
- params.set("showTriggerText", String(config.showTriggerText));
170
- }
171
- if (config.hideDefaultTrigger !== undefined) {
172
- params.set("hideDefaultTrigger", String(config.hideDefaultTrigger));
173
- }
174
- if (config.enableMobile !== undefined) {
175
- params.set("enableMobile", String(config.enableMobile));
176
- }
177
- // Pre-chat form and start button - only pass if explicitly defined
178
- if (config.showPreChatForm !== undefined) {
179
- params.set("showPreChatForm", String(config.showPreChatForm));
180
- }
181
- if (config.showStartButton !== undefined) {
182
- params.set("showStartButton", String(config.showStartButton));
183
- }
184
- if (config.startButtonText) {
185
- params.set("startButtonText", config.startButtonText);
186
- }
187
- if (config.preChatFormFields) {
188
- params.set("preChatFormFields", JSON.stringify(config.preChatFormFields));
189
- }
190
- iframe.src = `${this.getBaseUrl()}/embed/chat?${params.toString()}`;
191
- // Responsive iframe styling with smooth transitions
192
- iframe.style.position = "absolute";
193
- iframe.style.top = "0";
194
- iframe.style.left = "0";
195
- iframe.style.border = "none";
196
- iframe.style.width = "100%";
197
- iframe.style.height = "100%";
198
- iframe.style.boxSizing = "border-box";
199
- // Adaptive border radius: circular for icon, rounded for button/expanded
200
- // No radius on extra small full-screen mode
201
- if (isExtraSmall && !shouldStartMinimized) {
202
- iframe.style.borderRadius = "0"; // Full screen, no radius
203
- }
204
- else if (shouldStartMinimized && initialWidth === "52px") {
205
- iframe.style.borderRadius = "50%"; // Circular for icon-only
206
- }
207
- else if (shouldStartMinimized) {
208
- iframe.style.borderRadius = "26px"; // Pill shape for text button
209
- }
210
- else {
211
- iframe.style.borderRadius = isMobile ? "0" : "16px"; // Rounded on desktop, square on mobile
212
- }
213
- iframe.style.transition = "border-radius 0.3s ease, box-shadow 0.3s ease";
214
- iframe.style.pointerEvents = "auto";
215
- // Adaptive shadow: larger on desktop, minimal on mobile
216
- if (shouldStartMinimized) {
217
- iframe.style.boxShadow = "0 4px 16px rgba(0,0,0,0.15)";
218
- }
219
- else if (isMobile) {
220
- iframe.style.boxShadow = isExtraSmall ? "none" : "0 2px 8px rgba(0,0,0,0.1)";
221
- }
222
- else {
223
- iframe.style.boxShadow = "0 8px 32px rgba(0,0,0,0.15)";
224
- }
225
- iframe.setAttribute("allow", "clipboard-write");
226
- iframe.setAttribute("title", "BuniAI Chat Widget");
227
- iframe.onload = () => {
85
+ // Create inline trigger iframe (no src)
86
+ const triggerIframe = document.createElement("iframe");
87
+ triggerIframe.id = "buni-trigger-iframe";
88
+ triggerIframe.style.cssText = `
89
+ position: absolute;
90
+ top: 0;
91
+ left: 0;
92
+ border: none;
93
+ width: 100%;
94
+ height: 100%;
95
+ box-sizing: border-box;
96
+ border-radius: ${showTriggerText && hasTriggerText ? "26px" : "50%"};
97
+ transition: border-radius 0.3s ease, box-shadow 0.3s ease;
98
+ pointer-events: auto;
99
+ `;
100
+ triggerIframe.setAttribute("title", "BuniAI Chat Trigger");
101
+ // Inject trigger HTML content directly (no src)
102
+ container.appendChild(triggerIframe);
103
+ document.body.appendChild(container);
104
+ triggerIframe.onload = () => {
105
+ var _a;
106
+ const triggerDoc = triggerIframe.contentDocument ||
107
+ ((_a = triggerIframe.contentWindow) === null || _a === void 0 ? void 0 : _a.document);
108
+ if (!triggerDoc) {
109
+ reject(new Error("Failed to access trigger iframe document"));
110
+ return;
111
+ }
112
+ // Build inline HTML for trigger
113
+ const triggerHTML = this.buildTriggerHTML(primaryColor, triggerText || companyName, showTriggerText && hasTriggerText, config.customAvatar, config.avatarType, config.avatarText);
114
+ triggerDoc.open();
115
+ triggerDoc.write(triggerHTML);
116
+ triggerDoc.close();
117
+ // Create chat iframe (initially hidden)
118
+ const chatIframe = document.createElement("iframe");
119
+ chatIframe.id = "buni-chat-iframe";
120
+ // Build URL with configuration parameters
121
+ const params = new URLSearchParams({
122
+ token: this.options.token,
123
+ embedded: "true",
124
+ source: "package",
125
+ framework: this.options.framework || "vanilla",
126
+ });
127
+ // Add all configuration parameters
128
+ if (config.theme)
129
+ params.set("theme", config.theme);
130
+ if (config.primaryColor)
131
+ params.set("primaryColor", config.primaryColor);
132
+ if (config.secondaryColor)
133
+ params.set("secondaryColor", config.secondaryColor);
134
+ if (config.position)
135
+ params.set("position", config.position);
136
+ if (widthValue && config.width !== undefined)
137
+ params.set("width", widthValue);
138
+ if (heightValue && config.height !== undefined)
139
+ params.set("height", heightValue);
140
+ if (config.customAvatar)
141
+ params.set("customAvatar", config.customAvatar);
142
+ if (config.companyName)
143
+ params.set("companyName", config.companyName);
144
+ if (config.welcomeMessage)
145
+ params.set("welcomeMessage", config.welcomeMessage);
146
+ if (config.triggerText)
147
+ params.set("triggerText", config.triggerText);
148
+ if (config.borderRadius)
149
+ params.set("borderRadius", config.borderRadius);
150
+ if (config.avatarType)
151
+ params.set("avatarType", config.avatarType);
152
+ if (config.avatarText)
153
+ params.set("avatarText", config.avatarText);
154
+ // Boolean options
155
+ if (config.showBranding !== undefined)
156
+ params.set("showBranding", String(config.showBranding));
157
+ if (config.autoOpen !== undefined)
158
+ params.set("autoOpen", String(config.autoOpen));
159
+ if (config.allowMinimize !== undefined)
160
+ params.set("allowMinimize", String(config.allowMinimize));
161
+ if (config.showMinimize !== undefined)
162
+ params.set("showMinimize", String(config.showMinimize));
163
+ if (config.allowClose !== undefined)
164
+ params.set("allowClose", String(config.allowClose));
165
+ if (config.enableFileUpload !== undefined)
166
+ params.set("enableFileUpload", String(config.enableFileUpload));
167
+ if (config.showTimestamps !== undefined)
168
+ params.set("showTimestamps", String(config.showTimestamps));
169
+ if (config.enableMobile !== undefined)
170
+ params.set("enableMobile", String(config.enableMobile));
171
+ if (config.showPreChatForm !== undefined)
172
+ params.set("showPreChatForm", String(config.showPreChatForm));
173
+ if (config.showStartButton !== undefined)
174
+ params.set("showStartButton", String(config.showStartButton));
175
+ if (config.startButtonText)
176
+ params.set("startButtonText", config.startButtonText);
177
+ if (config.preChatFormFields)
178
+ params.set("preChatFormFields", JSON.stringify(config.preChatFormFields));
179
+ chatIframe.src = `${this.getBaseUrl()}/embed/chat?${params.toString()}`;
180
+ // Chat iframe styling - initially hidden
181
+ chatIframe.style.cssText = `
182
+ position: absolute;
183
+ top: 0;
184
+ left: 0;
185
+ border: none;
186
+ width: 100%;
187
+ height: 100%;
188
+ box-sizing: border-box;
189
+ border-radius: ${isMobile ? "0" : "16px"};
190
+ transition: border-radius 0.3s ease, box-shadow 0.3s ease;
191
+ pointer-events: auto;
192
+ box-shadow: ${isMobile ? "none" : "0 8px 32px rgba(0,0,0,0.15)"};
193
+ display: none;
194
+ `;
195
+ chatIframe.setAttribute("allow", "clipboard-write");
196
+ chatIframe.setAttribute("title", "BuniAI Chat Widget");
197
+ container.appendChild(chatIframe);
198
+ chatIframe.onload = () => {
199
+ // Set visibility hidden after iframe loads to allow content initialization
200
+ chatIframe.style.visibility = "hidden";
201
+ this.setupPostMessageAPI(chatIframe);
202
+ };
228
203
  this.widgetElement = container;
229
- this.iframe = iframe;
230
- this.state.isMinimized = shouldStartMinimized;
231
- this.setupPostMessageAPI(iframe);
204
+ this.triggerIframe = triggerIframe;
205
+ this.chatIframe = chatIframe;
206
+ this.state.isMinimized = true;
207
+ this.state.isLoaded = true;
232
208
  resolve();
233
209
  };
234
- iframe.onerror = () => {
235
- reject(new Error("Failed to load BuniAI widget iframe"));
236
- };
237
- container.appendChild(iframe);
238
- document.body.appendChild(container);
210
+ // Trigger the load event
211
+ triggerIframe.src = "about:blank";
212
+ // Set up communication with trigger iframe
213
+ window.addEventListener("message", (event) => {
214
+ // Check if message is from trigger iframe
215
+ if (event.data.type === "trigger_clicked" &&
216
+ event.source === triggerIframe.contentWindow) {
217
+ this.openChat();
218
+ }
219
+ });
239
220
  });
240
221
  }
222
+ buildTriggerHTML(primaryColor, text, showText, customAvatar, avatarType, avatarText) {
223
+ const avatarContent = customAvatar
224
+ ? `<img src="${customAvatar}" alt="Avatar" style="width: 32px; height: 32px; border-radius: 50%;" />`
225
+ : avatarType === "text" && avatarText
226
+ ? `<div style="width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.3); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; color: white;">${avatarText.substring(0, 2).toUpperCase()}</div>`
227
+ : `<svg width="28" height="28" viewBox="0 0 24 24" fill="white"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1 0-.9-2-2zm0 14H6l-2 2V4h16v12z"/></svg>`;
228
+ return `<!DOCTYPE html>
229
+ <html>
230
+ <head>
231
+ <meta charset="UTF-8">
232
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
233
+ <style>
234
+ * { margin: 0; padding: 0; box-sizing: border-box; }
235
+ body {
236
+ width: 100%;
237
+ height: 100%;
238
+ display: flex;
239
+ align-items: center;
240
+ justify-content: center;
241
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
242
+ overflow: hidden;
243
+ }
244
+ .trigger {
245
+ display: flex;
246
+ align-items: center;
247
+ justify-content: center;
248
+ gap: ${showText ? "12px" : "0"};
249
+ padding: ${showText ? "10px 20px" : "10px"};
250
+ background: ${primaryColor};
251
+ color: white;
252
+ border-radius: ${showText ? "26px" : "50%"};
253
+ cursor: pointer;
254
+ transition: all 0.3s ease;
255
+ box-shadow: 0 4px 16px rgba(0,0,0,0.15);
256
+ animation: pulse 2s infinite;
257
+ ${showText ? "" : "width: 52px; height: 52px;"}
258
+ }
259
+ .trigger:hover {
260
+ transform: translateY(-2px);
261
+ filter: brightness(1.1);
262
+ box-shadow: 0 6px 24px ${primaryColor}99;
263
+ }
264
+ .trigger:active {
265
+ transform: translateY(0);
266
+ }
267
+ .avatar {
268
+ display: flex;
269
+ align-items: center;
270
+ justify-content: center;
271
+ flex-shrink: 0;
272
+ }
273
+ .text {
274
+ font-size: 14px;
275
+ font-weight: 600;
276
+ white-space: nowrap;
277
+ }
278
+ .badge {
279
+ position: absolute;
280
+ top: -4px;
281
+ right: -4px;
282
+ background: #f44336;
283
+ color: white;
284
+ border-radius: 10px;
285
+ padding: 2px 6px;
286
+ font-size: 11px;
287
+ font-weight: 600;
288
+ min-width: 18px;
289
+ text-align: center;
290
+ display: none;
291
+ animation: pulse 2s infinite;
292
+ }
293
+ .badge.show {
294
+ display: block;
295
+ }
296
+ @keyframes pulse {
297
+ 0%, 100% {
298
+ transform: scale(1);
299
+ box-shadow: 0 4px 16px rgba(0,0,0,0.15);
300
+ }
301
+ 50% {
302
+ transform: scale(1.02);
303
+ box-shadow: 0 6px 24px ${primaryColor}99;
304
+ }
305
+ }
306
+ </style>
307
+ </head>
308
+ <body>
309
+ <div style="position: relative;">
310
+ <div class="trigger" onclick="handleClick()">
311
+ <div class="avatar">${avatarContent}</div>
312
+ ${showText ? `<span class="text">${text}</span>` : ""}
313
+ </div>
314
+ <div class="badge" id="badge">0</div>
315
+ </div>
316
+ <script>
317
+ function handleClick() {
318
+ window.parent.postMessage({ type: 'trigger_clicked' }, '*');
319
+ }
320
+
321
+ // Listen for unread count updates
322
+ window.addEventListener('message', function(event) {
323
+ if (event.data.type === 'updateUnreadCount') {
324
+ const badge = document.getElementById('badge');
325
+ const count = event.data.count || 0;
326
+ badge.textContent = count;
327
+ if (count > 0) {
328
+ badge.classList.add('show');
329
+ } else {
330
+ badge.classList.remove('show');
331
+ }
332
+ }
333
+ });
334
+ </script>
335
+ </body>
336
+ </html>`;
337
+ }
338
+ async openChat() {
339
+ if (!this.chatIframe || !this.widgetElement || !this.triggerIframe)
340
+ return;
341
+ if (this.state.isOpen)
342
+ return; // Already open
343
+ const config = this.options.config || {};
344
+ const isMobile = window.innerWidth <= 768;
345
+ const isTablet = window.innerWidth > 768 && window.innerWidth <= 1024;
346
+ const ensureUnits = (value, defaultValue) => {
347
+ if (!value)
348
+ return defaultValue;
349
+ const str = String(value);
350
+ if (str.match(/^[\d.]+\s*(px|em|rem|%|vh|vw)$/))
351
+ return str;
352
+ if (str.match(/^[\d.]+$/))
353
+ return `${str}px`;
354
+ return str;
355
+ };
356
+ const widthValue = ensureUnits(config.width, "350px");
357
+ const heightValue = ensureUnits(config.height, "650px");
358
+ // Calculate chat dimensions
359
+ const chatWidth = isMobile
360
+ ? "100vw"
361
+ : isTablet
362
+ ? "min(calc(100vw - 3rem), 370px)"
363
+ : widthValue;
364
+ const chatHeight = isMobile
365
+ ? "100vh"
366
+ : isTablet
367
+ ? "min(calc(100vh - 3rem), 620px)"
368
+ : heightValue;
369
+ // Resize container for chat
370
+ this.widgetElement.style.cssText = `
371
+ position: fixed;
372
+ pointer-events: none;
373
+ z-index: 999999;
374
+ width: ${chatWidth};
375
+ height: ${chatHeight};
376
+ ${isMobile ? "max-width: 100vw; max-height: 100vh;" : ""}
377
+ transition: width 0.3s ease, height 0.3s ease, border-radius 0.3s ease;
378
+ ${this.getPositionStyles(config.position || "bottom-right", false)}
379
+ display: block;
380
+ overflow: visible;
381
+ box-sizing: border-box;
382
+ `;
383
+ // Hide trigger, show chat
384
+ this.triggerIframe.style.display = "none";
385
+ this.chatIframe.style.display = "block";
386
+ this.chatIframe.style.visibility = "visible";
387
+ this.state.isMinimized = false;
388
+ this.state.isOpen = true;
389
+ this.emit("maximized", { timestamp: Date.now() });
390
+ }
391
+ closeChat() {
392
+ if (!this.chatIframe || !this.widgetElement || !this.triggerIframe)
393
+ return;
394
+ const config = this.options.config || {};
395
+ const showTriggerText = config.showTriggerText !== false;
396
+ const hasTriggerText = !!config.triggerText;
397
+ // Hide chat iframe
398
+ this.chatIframe.style.display = "none";
399
+ this.chatIframe.style.visibility = "hidden";
400
+ // Resize container back to trigger size
401
+ const triggerWidth = showTriggerText && hasTriggerText ? "auto" : "52px";
402
+ const triggerHeight = "52px";
403
+ const triggerMinWidth = showTriggerText && hasTriggerText ? "auto" : "";
404
+ this.widgetElement.style.cssText = `
405
+ position: fixed;
406
+ pointer-events: none;
407
+ z-index: 999999;
408
+ width: ${triggerWidth};
409
+ height: ${triggerHeight};
410
+ ${triggerMinWidth ? `min-width: ${triggerMinWidth};` : ""}
411
+ transition: width 0.3s ease, height 0.3s ease, border-radius 0.3s ease;
412
+ ${this.getPositionStyles(config.position || "bottom-right", true)}
413
+ display: block;
414
+ overflow: hidden;
415
+ box-sizing: border-box;
416
+ `;
417
+ // Show trigger again
418
+ this.triggerIframe.style.display = "block";
419
+ this.state.isMinimized = true;
420
+ this.state.isOpen = false;
421
+ this.emit("minimized", { timestamp: Date.now() });
422
+ }
241
423
  getPositionStyles(position, isMinimized = false) {
242
424
  // Responsive positioning following mobile-first best practices
243
425
  const viewportWidth = window.innerWidth;
244
- const isExtraSmall = viewportWidth <= 375;
245
426
  const isMobile = viewportWidth <= 768;
246
427
  const isTablet = viewportWidth > 768 && viewportWidth <= 1024;
247
428
  // For extra small devices (Galaxy S8+, iPhone SE, etc.), use minimal or no margins
@@ -252,13 +433,9 @@ class BuniChatWidget {
252
433
  // Minimized button always needs some space from edges
253
434
  margin = isMobile ? "12px" : "20px";
254
435
  }
255
- else if (isExtraSmall) {
256
- // Full screen on extra small devices (no margins)
257
- margin = "0";
258
- }
259
436
  else if (isMobile) {
260
- // Small margins on mobile for breathing room
261
- margin = "8px";
437
+ // Full screen on all mobile devices (no margins)
438
+ margin = "0";
262
439
  }
263
440
  else if (isTablet) {
264
441
  // Medium margins on tablets
@@ -268,18 +445,9 @@ class BuniChatWidget {
268
445
  // Larger margins on desktop for floating effect
269
446
  margin = "24px";
270
447
  }
271
- // On extra small screens when not minimized, position at edges for full coverage
272
- if (isExtraSmall && !isMinimized) {
273
- switch (position) {
274
- case "bottom-right":
275
- case "bottom-left":
276
- return `bottom: 0; left: 0; right: 0;`;
277
- case "top-right":
278
- case "top-left":
279
- return `top: 0; left: 0; right: 0;`;
280
- default:
281
- return `bottom: 0; left: 0; right: 0;`;
282
- }
448
+ // On mobile screens when not minimized, position at edges for full coverage
449
+ if (isMobile && !isMinimized) {
450
+ return `top: 0; left: 0; right: 0; bottom: 0;`;
283
451
  }
284
452
  // Standard positioning for larger screens or minimized state
285
453
  switch (position) {
@@ -298,7 +466,7 @@ class BuniChatWidget {
298
466
  setupPostMessageAPI(iframe) {
299
467
  // Listen for messages from the iframe
300
468
  window.addEventListener("message", (event) => {
301
- var _a, _b;
469
+ var _a;
302
470
  // Verify origin for security
303
471
  if (event.origin !== this.getBaseUrl()) {
304
472
  return;
@@ -329,60 +497,15 @@ class BuniChatWidget {
329
497
  }
330
498
  break;
331
499
  case "minimized":
332
- this.state.isMinimized = true;
333
- if (this.widgetElement && data.dimensions) {
334
- // Resize container to trigger button size when minimized
335
- this.widgetElement.style.width = data.dimensions.width;
336
- this.widgetElement.style.height = data.dimensions.height;
337
- this.widgetElement.style.overflow = "hidden";
338
- if (data.dimensions.minWidth) {
339
- this.widgetElement.style.minWidth = data.dimensions.minWidth;
340
- }
341
- }
342
- if (this.iframe) {
343
- // Use circular border for icon-only, rounded for text button
344
- this.iframe.style.borderRadius =
345
- ((_a = data.dimensions) === null || _a === void 0 ? void 0 : _a.width) === ((_b = data.dimensions) === null || _b === void 0 ? void 0 : _b.height)
346
- ? "50%"
347
- : "26px";
348
- }
349
- this.emit("minimized", data);
500
+ // User clicked minimize in chat - close chat and show trigger
501
+ this.closeChat();
350
502
  break;
351
- case "maximized":
352
- this.state.isMinimized = false;
353
- if (this.widgetElement) {
354
- // Check if we're on mobile
355
- const isMobile = window.innerWidth <= 768;
356
- const config = this.options.config || {};
357
- if (isMobile) {
358
- // On mobile, enforce responsive sizing
359
- this.widgetElement.style.width = "min(calc(100vw - 2rem), 370px)";
360
- this.widgetElement.style.height =
361
- "min(calc(100vh - 2rem), 680px)";
362
- this.widgetElement.style.maxWidth = "370px";
363
- this.widgetElement.style.maxHeight = "680px";
364
- }
365
- else {
366
- // On desktop, respect custom dimensions
367
- const ensureUnits = (value, defaultValue) => {
368
- if (!value)
369
- return defaultValue;
370
- const str = String(value);
371
- if (str.match(/^[\d.]+\s*(px|em|rem|%|vh|vw)$/))
372
- return str;
373
- if (str.match(/^[\d.]+$/))
374
- return `${str}px`;
375
- return str;
376
- };
377
- this.widgetElement.style.width = ensureUnits(config.width, "350px");
378
- this.widgetElement.style.height = ensureUnits(config.height, "650px");
379
- }
380
- this.widgetElement.style.overflow = "visible";
503
+ case "new_unread_message":
504
+ // Update unread count in trigger
505
+ this.state.unreadCount++;
506
+ if ((_a = this.triggerIframe) === null || _a === void 0 ? void 0 : _a.contentWindow) {
507
+ this.triggerIframe.contentWindow.postMessage({ type: "updateUnreadCount", count: this.state.unreadCount }, "*");
381
508
  }
382
- if (this.iframe) {
383
- this.iframe.style.borderRadius = "12px";
384
- }
385
- this.emit("maximized", data);
386
509
  break;
387
510
  case "customer_data_updated":
388
511
  this.customerData = data;
@@ -403,8 +526,8 @@ class BuniChatWidget {
403
526
  }
404
527
  postMessageToWidget(type, data) {
405
528
  var _a;
406
- if (this.widgetElement && this.widgetElement instanceof HTMLIFrameElement) {
407
- (_a = this.widgetElement.contentWindow) === null || _a === void 0 ? void 0 : _a.postMessage({ type, data }, this.getBaseUrl());
529
+ if ((_a = this.chatIframe) === null || _a === void 0 ? void 0 : _a.contentWindow) {
530
+ this.chatIframe.contentWindow.postMessage({ type, data }, this.getBaseUrl());
408
531
  }
409
532
  }
410
533
  getBaseUrl() {
@@ -417,44 +540,49 @@ class BuniChatWidget {
417
540
  this.widgetElement.remove();
418
541
  this.widgetElement = null;
419
542
  }
543
+ this.triggerIframe = null;
544
+ this.chatIframe = null;
420
545
  this.eventListeners.clear();
421
546
  this.state.isLoaded = false;
422
547
  this.customerData = null;
423
548
  this.sessionVariables = null;
424
549
  }
425
550
  show() {
426
- // Show the iframe if it was hidden (hideDefaultTrigger mode)
427
- if (this.widgetElement instanceof HTMLIFrameElement) {
551
+ // Show the widget container if it was hidden (hideDefaultTrigger mode)
552
+ if (this.widgetElement) {
428
553
  this.widgetElement.style.display = "block";
429
554
  }
430
- this.postMessageToWidget("show");
431
- this.state.isOpen = true;
432
- this.state.unreadCount = 0;
433
- this.emit("visibility_changed", { visibility: "visible" });
555
+ // Open chat if not already open
556
+ if (!this.chatIframe && !this.state.isOpen) {
557
+ this.openChat();
558
+ }
434
559
  }
435
560
  hide() {
436
561
  var _a;
437
- this.postMessageToWidget("hide");
438
- // If hideDefaultTrigger is enabled, completely hide the iframe
439
- if (((_a = this.options.config) === null || _a === void 0 ? void 0 : _a.hideDefaultTrigger) &&
440
- this.widgetElement instanceof HTMLIFrameElement) {
562
+ // Close chat if open
563
+ if (this.chatIframe) {
564
+ this.closeChat();
565
+ }
566
+ // If hideDefaultTrigger is enabled, completely hide the container
567
+ if (((_a = this.options.config) === null || _a === void 0 ? void 0 : _a.hideDefaultTrigger) && this.widgetElement) {
441
568
  this.widgetElement.style.display = "none";
442
569
  }
443
570
  this.state.isOpen = false;
444
571
  this.emit("visibility_changed", { visibility: "hidden" });
445
572
  }
446
573
  toggle() {
447
- this.state.isOpen ? this.hide() : this.show();
574
+ if (this.chatIframe || this.state.isOpen) {
575
+ this.closeChat();
576
+ }
577
+ else {
578
+ this.openChat();
579
+ }
448
580
  }
449
581
  minimize() {
450
- this.postMessageToWidget("minimize");
451
- this.state.isMinimized = true;
452
- this.emit("minimized", { timestamp: Date.now() });
582
+ this.closeChat();
453
583
  }
454
584
  maximize() {
455
- this.postMessageToWidget("maximize");
456
- this.state.isMinimized = false;
457
- this.emit("maximized", { timestamp: Date.now() });
585
+ this.openChat();
458
586
  }
459
587
  setCustomerData(data) {
460
588
  this.customerData = { ...this.customerData, ...data };