copilot-chat-widget 0.1.17 → 0.1.18
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 +63 -63
- package/package.json +1 -1
- package/src/index.d.ts +8 -8
- package/src/index.js +338 -338
- package/src/widget-runtime.js +77 -77
package/README.md
CHANGED
|
@@ -1,63 +1,63 @@
|
|
|
1
|
-
# Copilot Chat Widget
|
|
2
|
-
|
|
3
|
-
Embeddable chat widget that can be added via NPM or a script tag.
|
|
4
|
-
|
|
5
|
-
## Installation
|
|
6
|
-
```bash
|
|
7
|
-
npm install copilot-chat-widget
|
|
8
|
-
# or
|
|
9
|
-
yarn add copilot-chat-widget
|
|
10
|
-
```
|
|
11
|
-
|
|
12
|
-
## Usage (NPM import)
|
|
13
|
-
```js
|
|
14
|
-
import { loadCopilotChatWidget } from "copilot-chat-widget";
|
|
15
|
-
|
|
16
|
-
loadCopilotChatWidget({
|
|
17
|
-
token: "YOUR_WIDGET_TOKEN",
|
|
18
|
-
// optional: baseUrl if backend is on a different origin
|
|
19
|
-
// baseUrl: "https://your-backend-domain"
|
|
20
|
-
});
|
|
21
|
-
```
|
|
22
|
-
`loadCopilotChatWidget` injects the standalone script (`chat-widget.min.js`) and bootstraps the widget using the provided `token`.
|
|
23
|
-
|
|
24
|
-
### React/Next.js example
|
|
25
|
-
```jsx
|
|
26
|
-
import { useEffect } from "react";
|
|
27
|
-
import { loadCopilotChatWidget } from "copilot-chat-widget";
|
|
28
|
-
|
|
29
|
-
export default function Page() {
|
|
30
|
-
useEffect(() => {
|
|
31
|
-
loadCopilotChatWidget({
|
|
32
|
-
token: process.env.NEXT_PUBLIC_CHAT_WIDGET_TOKEN,
|
|
33
|
-
baseUrl: process.env.NEXT_PUBLIC_WIDGET_BASE_URL // optional override if backend is another origin
|
|
34
|
-
});
|
|
35
|
-
}, []);
|
|
36
|
-
|
|
37
|
-
return <main>Your page content</main>;
|
|
38
|
-
}
|
|
39
|
-
```
|
|
40
|
-
|
|
41
|
-
## Usage (script tag)
|
|
42
|
-
```html
|
|
43
|
-
<script
|
|
44
|
-
src="https://cdn.example.com/chat-widget.min.js"
|
|
45
|
-
data-token="YOUR_WIDGET_TOKEN"
|
|
46
|
-
data-base-url="https://your-backend-domain" <!-- optional if backend is another origin -->
|
|
47
|
-
></script>
|
|
48
|
-
```
|
|
49
|
-
- `data-token`: required.
|
|
50
|
-
- `data-base-url`: optional override; if omitted, the widget uses the build-time default `WIDGET_BASE_URL`, then falls back to the script/page origin.
|
|
51
|
-
- `data-autoload="false"`: if you want to insert the script but call `window.CopilotChat.init()` manually.
|
|
52
|
-
|
|
53
|
-
## Configuration
|
|
54
|
-
- `token` (string, required): widget token.
|
|
55
|
-
- `baseUrl` (string): backend host serving `/api/chat-widget/config`. Needed when the embedding page is on a different origin. If omitted, the widget uses `WIDGET_BASE_URL` (injected at build) then falls back to the script/page origin.
|
|
56
|
-
- `autoload` (boolean): set `false` to defer bootstrap and call `window.CopilotChat.load()` yourself.
|
|
57
|
-
|
|
58
|
-
Runtime controls (after script loads):
|
|
59
|
-
```js
|
|
60
|
-
window.CopilotChat.open(); // open widget
|
|
61
|
-
window.CopilotChat.close(); // close widget
|
|
62
|
-
window.CopilotChat.load(); // initialize if autoload=false
|
|
63
|
-
```
|
|
1
|
+
# Copilot Chat Widget
|
|
2
|
+
|
|
3
|
+
Embeddable chat widget that can be added via NPM or a script tag.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
```bash
|
|
7
|
+
npm install copilot-chat-widget
|
|
8
|
+
# or
|
|
9
|
+
yarn add copilot-chat-widget
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
## Usage (NPM import)
|
|
13
|
+
```js
|
|
14
|
+
import { loadCopilotChatWidget } from "copilot-chat-widget";
|
|
15
|
+
|
|
16
|
+
loadCopilotChatWidget({
|
|
17
|
+
token: "YOUR_WIDGET_TOKEN",
|
|
18
|
+
// optional: baseUrl if backend is on a different origin
|
|
19
|
+
// baseUrl: "https://your-backend-domain"
|
|
20
|
+
});
|
|
21
|
+
```
|
|
22
|
+
`loadCopilotChatWidget` injects the standalone script (`chat-widget.min.js`) and bootstraps the widget using the provided `token`.
|
|
23
|
+
|
|
24
|
+
### React/Next.js example
|
|
25
|
+
```jsx
|
|
26
|
+
import { useEffect } from "react";
|
|
27
|
+
import { loadCopilotChatWidget } from "copilot-chat-widget";
|
|
28
|
+
|
|
29
|
+
export default function Page() {
|
|
30
|
+
useEffect(() => {
|
|
31
|
+
loadCopilotChatWidget({
|
|
32
|
+
token: process.env.NEXT_PUBLIC_CHAT_WIDGET_TOKEN,
|
|
33
|
+
baseUrl: process.env.NEXT_PUBLIC_WIDGET_BASE_URL // optional override if backend is another origin
|
|
34
|
+
});
|
|
35
|
+
}, []);
|
|
36
|
+
|
|
37
|
+
return <main>Your page content</main>;
|
|
38
|
+
}
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
## Usage (script tag)
|
|
42
|
+
```html
|
|
43
|
+
<script
|
|
44
|
+
src="https://cdn.example.com/chat-widget.min.js"
|
|
45
|
+
data-token="YOUR_WIDGET_TOKEN"
|
|
46
|
+
data-base-url="https://your-backend-domain" <!-- optional if backend is another origin -->
|
|
47
|
+
></script>
|
|
48
|
+
```
|
|
49
|
+
- `data-token`: required.
|
|
50
|
+
- `data-base-url`: optional override; if omitted, the widget uses the build-time default `WIDGET_BASE_URL`, then falls back to the script/page origin.
|
|
51
|
+
- `data-autoload="false"`: if you want to insert the script but call `window.CopilotChat.init()` manually.
|
|
52
|
+
|
|
53
|
+
## Configuration
|
|
54
|
+
- `token` (string, required): widget token.
|
|
55
|
+
- `baseUrl` (string): backend host serving `/api/chat-widget/config`. Needed when the embedding page is on a different origin. If omitted, the widget uses `WIDGET_BASE_URL` (injected at build) then falls back to the script/page origin.
|
|
56
|
+
- `autoload` (boolean): set `false` to defer bootstrap and call `window.CopilotChat.load()` yourself.
|
|
57
|
+
|
|
58
|
+
Runtime controls (after script loads):
|
|
59
|
+
```js
|
|
60
|
+
window.CopilotChat.open(); // open widget
|
|
61
|
+
window.CopilotChat.close(); // close widget
|
|
62
|
+
window.CopilotChat.load(); // initialize if autoload=false
|
|
63
|
+
```
|
package/package.json
CHANGED
package/src/index.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
export interface CopilotChatOptions {
|
|
2
|
-
token: string;
|
|
3
|
-
autoload?: boolean;
|
|
4
|
-
baseUrl?: string;
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
export function loadCopilotChatWidget(options: CopilotChatOptions): unknown;
|
|
8
|
-
export default loadCopilotChatWidget;
|
|
1
|
+
export interface CopilotChatOptions {
|
|
2
|
+
token: string;
|
|
3
|
+
autoload?: boolean;
|
|
4
|
+
baseUrl?: string;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
export function loadCopilotChatWidget(options: CopilotChatOptions): unknown;
|
|
8
|
+
export default loadCopilotChatWidget;
|
package/src/index.js
CHANGED
|
@@ -1,338 +1,338 @@
|
|
|
1
|
-
const BUILD_BASE_URL =
|
|
2
|
-
typeof __WIDGET_BASE_URL__ !== "undefined" && __WIDGET_BASE_URL__
|
|
3
|
-
? __WIDGET_BASE_URL__
|
|
4
|
-
: undefined;
|
|
5
|
-
|
|
6
|
-
const BUTTON_SIZE = 64;
|
|
7
|
-
const IFRAME_SIZE = 720;
|
|
8
|
-
|
|
9
|
-
const buildWidget = ({ iframeUrl, launcherIcon }) => {
|
|
10
|
-
const existingRoot = document.querySelector("[data-copilot-widget-root]");
|
|
11
|
-
if (existingRoot) {
|
|
12
|
-
existingRoot.remove();
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
const showCheckoutToast = (message) => {
|
|
16
|
-
const existingToast = document.querySelector("[data-copilot-checkout-toast]");
|
|
17
|
-
if (existingToast) {
|
|
18
|
-
existingToast.remove();
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
const toast = document.createElement("div");
|
|
22
|
-
toast.setAttribute("data-copilot-checkout-toast", "true");
|
|
23
|
-
toast.innerText = message;
|
|
24
|
-
|
|
25
|
-
Object.assign(toast.style, {
|
|
26
|
-
position: "fixed",
|
|
27
|
-
top: "20px",
|
|
28
|
-
left: "50%",
|
|
29
|
-
transform: "translateX(-50%)",
|
|
30
|
-
padding: "12px 16px",
|
|
31
|
-
background: "#0f172a",
|
|
32
|
-
color: "white",
|
|
33
|
-
borderRadius: "12px",
|
|
34
|
-
boxShadow: "0 8px 24px rgba(0,0,0,0.25)",
|
|
35
|
-
zIndex: 2147483647,
|
|
36
|
-
fontSize: "14px",
|
|
37
|
-
fontWeight: "600",
|
|
38
|
-
maxWidth: "420px",
|
|
39
|
-
lineHeight: "1.4",
|
|
40
|
-
textAlign: "center",
|
|
41
|
-
});
|
|
42
|
-
|
|
43
|
-
document.body.appendChild(toast);
|
|
44
|
-
|
|
45
|
-
setTimeout(() => {
|
|
46
|
-
toast.remove();
|
|
47
|
-
}, 4500);
|
|
48
|
-
};
|
|
49
|
-
|
|
50
|
-
// Shadow DOM container
|
|
51
|
-
const containerHost = document.createElement("div");
|
|
52
|
-
containerHost.setAttribute("data-copilot-widget-root", "true");
|
|
53
|
-
const shadow = containerHost.attachShadow({ mode: "open" });
|
|
54
|
-
document.body.appendChild(containerHost);
|
|
55
|
-
|
|
56
|
-
// Button
|
|
57
|
-
const btn = document.createElement("button");
|
|
58
|
-
btn.type = "button";
|
|
59
|
-
btn.setAttribute("aria-label", "Open Copilot chat");
|
|
60
|
-
btn.innerHTML = `
|
|
61
|
-
<img
|
|
62
|
-
src="${launcherIcon}"
|
|
63
|
-
alt="Copilot chat launcher"
|
|
64
|
-
style="width: 38px; height: 38px; object-fit: contain; border-radius: 50%; pointer-events: none;"
|
|
65
|
-
/>
|
|
66
|
-
`;
|
|
67
|
-
|
|
68
|
-
Object.assign(btn.style, {
|
|
69
|
-
position: "fixed",
|
|
70
|
-
bottom: "24px",
|
|
71
|
-
right: "24px",
|
|
72
|
-
width: `${BUTTON_SIZE}px`,
|
|
73
|
-
height: `${BUTTON_SIZE}px`,
|
|
74
|
-
borderRadius: "50%",
|
|
75
|
-
border: "none",
|
|
76
|
-
background: "linear-gradient(135deg, #0078ff, #00c6ff)",
|
|
77
|
-
color: "white",
|
|
78
|
-
cursor: "pointer",
|
|
79
|
-
zIndex: 999998,
|
|
80
|
-
display: "flex",
|
|
81
|
-
alignItems: "center",
|
|
82
|
-
justifyContent: "center",
|
|
83
|
-
boxShadow: "0 6px 14px rgba(0,0,0,0.25)",
|
|
84
|
-
transition: "all 0.25s ease",
|
|
85
|
-
});
|
|
86
|
-
|
|
87
|
-
btn.onmouseover = () => {
|
|
88
|
-
btn.style.transform = "scale(1.12)";
|
|
89
|
-
btn.style.boxShadow = "0 10px 25px rgba(0,0,0,0.3)";
|
|
90
|
-
};
|
|
91
|
-
btn.onmouseout = () => {
|
|
92
|
-
btn.style.transform = "scale(1)";
|
|
93
|
-
btn.style.boxShadow = "0 6px 14px rgba(0,0,0,0.25)";
|
|
94
|
-
};
|
|
95
|
-
|
|
96
|
-
const container = document.createElement("div");
|
|
97
|
-
container.setAttribute("data-copilot-widget-root", "true");
|
|
98
|
-
Object.assign(container.style, {
|
|
99
|
-
display: "none",
|
|
100
|
-
position: "fixed",
|
|
101
|
-
bottom: `${BUTTON_SIZE + 36}px`,
|
|
102
|
-
right: "24px",
|
|
103
|
-
zIndex: "999999",
|
|
104
|
-
transformOrigin: "bottom right",
|
|
105
|
-
transform: "scale(0.8) translateY(20px)",
|
|
106
|
-
opacity: "0",
|
|
107
|
-
transition: "all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55)",
|
|
108
|
-
});
|
|
109
|
-
|
|
110
|
-
const arrow = document.createElement("div");
|
|
111
|
-
const arrowBorder = document.createElement("div");
|
|
112
|
-
const arrowFill = document.createElement("div");
|
|
113
|
-
|
|
114
|
-
Object.assign(arrow.style, {
|
|
115
|
-
position: "absolute",
|
|
116
|
-
bottom: "-14px",
|
|
117
|
-
right: "28px",
|
|
118
|
-
width: "30px",
|
|
119
|
-
height: "20px",
|
|
120
|
-
pointerEvents: "none",
|
|
121
|
-
display: "none",
|
|
122
|
-
zIndex: "1",
|
|
123
|
-
});
|
|
124
|
-
|
|
125
|
-
Object.assign(arrowBorder.style, {
|
|
126
|
-
position: "absolute",
|
|
127
|
-
bottom: "0",
|
|
128
|
-
left: "0",
|
|
129
|
-
right: "0",
|
|
130
|
-
margin: "0 auto",
|
|
131
|
-
width: "0",
|
|
132
|
-
height: "0",
|
|
133
|
-
borderLeft: "15px solid transparent",
|
|
134
|
-
borderRight: "15px solid transparent",
|
|
135
|
-
borderTop: "15px solid rgba(15,23,42,0.1)",
|
|
136
|
-
});
|
|
137
|
-
|
|
138
|
-
Object.assign(arrowFill.style, {
|
|
139
|
-
position: "absolute",
|
|
140
|
-
bottom: "2px",
|
|
141
|
-
left: "0",
|
|
142
|
-
right: "0",
|
|
143
|
-
margin: "0 auto",
|
|
144
|
-
width: "0",
|
|
145
|
-
height: "0",
|
|
146
|
-
borderLeft: "13px solid transparent",
|
|
147
|
-
borderRight: "13px solid transparent",
|
|
148
|
-
borderTop: "13px solid white",
|
|
149
|
-
boxShadow: "0 6px 16px rgba(15,23,42,0.12)",
|
|
150
|
-
borderRadius: "2px",
|
|
151
|
-
});
|
|
152
|
-
|
|
153
|
-
arrow.appendChild(arrowBorder);
|
|
154
|
-
arrow.appendChild(arrowFill);
|
|
155
|
-
|
|
156
|
-
const frameWrapper = document.createElement("div");
|
|
157
|
-
Object.assign(frameWrapper.style, {
|
|
158
|
-
width: `${IFRAME_SIZE}px`,
|
|
159
|
-
maxWidth: "calc(100vw - 48px)",
|
|
160
|
-
height: `${Math.min(IFRAME_SIZE, Math.max(320, window.innerHeight - 140))}px`,
|
|
161
|
-
maxHeight: "calc(100vh - 150px)",
|
|
162
|
-
borderRadius: "20px",
|
|
163
|
-
background: "white",
|
|
164
|
-
border: "1px solid rgba(15,23,42,0.12)",
|
|
165
|
-
boxShadow: "0 18px 45px rgba(15,23,42,0.16)",
|
|
166
|
-
overflow: "hidden",
|
|
167
|
-
});
|
|
168
|
-
shadow.appendChild(frameWrapper);
|
|
169
|
-
|
|
170
|
-
const iframe = document.createElement("iframe");
|
|
171
|
-
iframe.src = iframeUrl;
|
|
172
|
-
iframe.title = "Copilot chat widget";
|
|
173
|
-
iframe.allow = "clipboard-read; clipboard-write; microphone; camera; display-capture";
|
|
174
|
-
iframe.setAttribute("scrolling", "no");
|
|
175
|
-
Object.assign(iframe.style, {
|
|
176
|
-
width: "100%",
|
|
177
|
-
height: "100%",
|
|
178
|
-
border: "none",
|
|
179
|
-
display: "block",
|
|
180
|
-
background: "transparent",
|
|
181
|
-
overflow: "hidden",
|
|
182
|
-
});
|
|
183
|
-
|
|
184
|
-
shadow.appendChild(frameWrapper);
|
|
185
|
-
frameWrapper.appendChild(iframe);
|
|
186
|
-
|
|
187
|
-
container.appendChild(arrow);
|
|
188
|
-
container.appendChild(frameWrapper);
|
|
189
|
-
document.body.appendChild(btn);
|
|
190
|
-
document.body.appendChild(container);
|
|
191
|
-
|
|
192
|
-
let isOpen = false;
|
|
193
|
-
|
|
194
|
-
const closeChat = () => {
|
|
195
|
-
if (!isOpen) return;
|
|
196
|
-
isOpen = false;
|
|
197
|
-
container.style.opacity = "0";
|
|
198
|
-
container.style.transform = "scale(0.8) translateY(20px)";
|
|
199
|
-
arrow.style.display = "none";
|
|
200
|
-
setTimeout(() => {
|
|
201
|
-
container.style.display = "none";
|
|
202
|
-
}, 250);
|
|
203
|
-
btn.style.transform = "scale(1)";
|
|
204
|
-
};
|
|
205
|
-
|
|
206
|
-
const handleWidgetMessage = (event) => {
|
|
207
|
-
const { data, source } = event || {};
|
|
208
|
-
if (!data?.type) return;
|
|
209
|
-
|
|
210
|
-
if (data.type === "CART_CHECKOUT" && source === iframe.contentWindow) {
|
|
211
|
-
console.log("[CopilotChat] Received checkout payload from widget:", data);
|
|
212
|
-
showCheckoutToast("Checkout message received from chat widget. Check console for payload.");
|
|
213
|
-
return;
|
|
214
|
-
}
|
|
215
|
-
|
|
216
|
-
if (data.type === "WIDGET_READY" && source === iframe.contentWindow) {
|
|
217
|
-
iframe.contentWindow.postMessage({ type: "INIT_WIDGET" }, "*");
|
|
218
|
-
return;
|
|
219
|
-
}
|
|
220
|
-
|
|
221
|
-
if (data.type === "CHAT_CLOSED") {
|
|
222
|
-
closeChat();
|
|
223
|
-
}
|
|
224
|
-
};
|
|
225
|
-
|
|
226
|
-
window.addEventListener("message", handleWidgetMessage);
|
|
227
|
-
|
|
228
|
-
btn.onclick = (event) => {
|
|
229
|
-
event.stopPropagation();
|
|
230
|
-
isOpen = !isOpen;
|
|
231
|
-
if (isOpen) {
|
|
232
|
-
container.style.display = "block";
|
|
233
|
-
arrow.style.display = "block";
|
|
234
|
-
requestAnimationFrame(() => {
|
|
235
|
-
container.style.opacity = "1";
|
|
236
|
-
container.style.transform = "scale(1) translateY(0)";
|
|
237
|
-
});
|
|
238
|
-
} else {
|
|
239
|
-
closeChat();
|
|
240
|
-
}
|
|
241
|
-
};
|
|
242
|
-
|
|
243
|
-
document.addEventListener("click", (event) => {
|
|
244
|
-
const target = event.target;
|
|
245
|
-
if (!target) return;
|
|
246
|
-
if (isOpen && !container.contains(target) && target !== btn) {
|
|
247
|
-
closeChat();
|
|
248
|
-
}
|
|
249
|
-
});
|
|
250
|
-
|
|
251
|
-
const controls = {
|
|
252
|
-
close: closeChat,
|
|
253
|
-
open: () => {
|
|
254
|
-
if (!isOpen) {
|
|
255
|
-
btn.click();
|
|
256
|
-
}
|
|
257
|
-
},
|
|
258
|
-
};
|
|
259
|
-
|
|
260
|
-
window.CopilotChat = window.CopilotChat || {};
|
|
261
|
-
window.CopilotChat.close = controls.close;
|
|
262
|
-
window.CopilotChat.open = controls.open;
|
|
263
|
-
window.CopilotChat.controls = controls;
|
|
264
|
-
|
|
265
|
-
return controls;
|
|
266
|
-
};
|
|
267
|
-
|
|
268
|
-
export async function loadCopilotChatWidget(options = {}) {
|
|
269
|
-
if (typeof window === "undefined" || typeof document === "undefined") {
|
|
270
|
-
return null;
|
|
271
|
-
}
|
|
272
|
-
|
|
273
|
-
const globalConfig = window.CopilotChatConfig || {};
|
|
274
|
-
const token =
|
|
275
|
-
options.token ||
|
|
276
|
-
globalConfig.token ||
|
|
277
|
-
(typeof window !== "undefined"
|
|
278
|
-
? window.localStorage?.getItem("copilotChatToken") || null
|
|
279
|
-
: null);
|
|
280
|
-
|
|
281
|
-
if (!token) {
|
|
282
|
-
console.error(
|
|
283
|
-
"[CopilotChat] Missing token (provide via loadCopilotChatWidget({ token }) or window.CopilotChatConfig.token)."
|
|
284
|
-
);
|
|
285
|
-
return null;
|
|
286
|
-
}
|
|
287
|
-
|
|
288
|
-
const baseUrl =
|
|
289
|
-
options.baseUrl ||
|
|
290
|
-
globalConfig.baseUrl ||
|
|
291
|
-
BUILD_BASE_URL ||
|
|
292
|
-
(typeof window !== "undefined" && window.location?.origin) ||
|
|
293
|
-
null;
|
|
294
|
-
|
|
295
|
-
if (!baseUrl) {
|
|
296
|
-
console.error(
|
|
297
|
-
"[CopilotChat] Missing baseUrl (set via loadCopilotChatWidget({ baseUrl }), window.CopilotChatConfig.baseUrl, or WIDGET_BASE_URL)."
|
|
298
|
-
);
|
|
299
|
-
return null;
|
|
300
|
-
}
|
|
301
|
-
|
|
302
|
-
const url = `${baseUrl.replace(/\/$/, "")}/api/chat-widget/config?token=${encodeURIComponent(
|
|
303
|
-
token
|
|
304
|
-
)}`;
|
|
305
|
-
|
|
306
|
-
try {
|
|
307
|
-
const response = await fetch(url, {
|
|
308
|
-
credentials: "omit",
|
|
309
|
-
mode: "cors",
|
|
310
|
-
});
|
|
311
|
-
|
|
312
|
-
if (!response.ok) {
|
|
313
|
-
throw new Error(`Server responded with ${response.status}`);
|
|
314
|
-
}
|
|
315
|
-
|
|
316
|
-
const remoteConfig = await response.json();
|
|
317
|
-
if (!remoteConfig?.iframeUrl || !remoteConfig?.launcherIcon) {
|
|
318
|
-
throw new Error("Received incomplete widget configuration from server.");
|
|
319
|
-
}
|
|
320
|
-
|
|
321
|
-
window.CopilotChat = window.CopilotChat || {};
|
|
322
|
-
window.CopilotChat.token = token;
|
|
323
|
-
window.CopilotChat.baseUrl = baseUrl;
|
|
324
|
-
|
|
325
|
-
return buildWidget({
|
|
326
|
-
iframeUrl: remoteConfig.iframeUrl,
|
|
327
|
-
launcherIcon: remoteConfig.launcherIcon,
|
|
328
|
-
});
|
|
329
|
-
} catch (error) {
|
|
330
|
-
console.error(
|
|
331
|
-
"[CopilotChat] Error during widget bootstrap:",
|
|
332
|
-
error instanceof Error ? error.message : error
|
|
333
|
-
);
|
|
334
|
-
return null;
|
|
335
|
-
}
|
|
336
|
-
}
|
|
337
|
-
|
|
338
|
-
export default loadCopilotChatWidget;
|
|
1
|
+
const BUILD_BASE_URL =
|
|
2
|
+
typeof __WIDGET_BASE_URL__ !== "undefined" && __WIDGET_BASE_URL__
|
|
3
|
+
? __WIDGET_BASE_URL__
|
|
4
|
+
: undefined;
|
|
5
|
+
|
|
6
|
+
const BUTTON_SIZE = 64;
|
|
7
|
+
const IFRAME_SIZE = 720;
|
|
8
|
+
|
|
9
|
+
const buildWidget = ({ iframeUrl, launcherIcon }) => {
|
|
10
|
+
const existingRoot = document.querySelector("[data-copilot-widget-root]");
|
|
11
|
+
if (existingRoot) {
|
|
12
|
+
existingRoot.remove();
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
const showCheckoutToast = (message) => {
|
|
16
|
+
const existingToast = document.querySelector("[data-copilot-checkout-toast]");
|
|
17
|
+
if (existingToast) {
|
|
18
|
+
existingToast.remove();
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
const toast = document.createElement("div");
|
|
22
|
+
toast.setAttribute("data-copilot-checkout-toast", "true");
|
|
23
|
+
toast.innerText = message;
|
|
24
|
+
|
|
25
|
+
Object.assign(toast.style, {
|
|
26
|
+
position: "fixed",
|
|
27
|
+
top: "20px",
|
|
28
|
+
left: "50%",
|
|
29
|
+
transform: "translateX(-50%)",
|
|
30
|
+
padding: "12px 16px",
|
|
31
|
+
background: "#0f172a",
|
|
32
|
+
color: "white",
|
|
33
|
+
borderRadius: "12px",
|
|
34
|
+
boxShadow: "0 8px 24px rgba(0,0,0,0.25)",
|
|
35
|
+
zIndex: 2147483647,
|
|
36
|
+
fontSize: "14px",
|
|
37
|
+
fontWeight: "600",
|
|
38
|
+
maxWidth: "420px",
|
|
39
|
+
lineHeight: "1.4",
|
|
40
|
+
textAlign: "center",
|
|
41
|
+
});
|
|
42
|
+
|
|
43
|
+
document.body.appendChild(toast);
|
|
44
|
+
|
|
45
|
+
setTimeout(() => {
|
|
46
|
+
toast.remove();
|
|
47
|
+
}, 4500);
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
// Shadow DOM container
|
|
51
|
+
const containerHost = document.createElement("div");
|
|
52
|
+
containerHost.setAttribute("data-copilot-widget-root", "true");
|
|
53
|
+
const shadow = containerHost.attachShadow({ mode: "open" });
|
|
54
|
+
document.body.appendChild(containerHost);
|
|
55
|
+
|
|
56
|
+
// Button
|
|
57
|
+
const btn = document.createElement("button");
|
|
58
|
+
btn.type = "button";
|
|
59
|
+
btn.setAttribute("aria-label", "Open Copilot chat");
|
|
60
|
+
btn.innerHTML = `
|
|
61
|
+
<img
|
|
62
|
+
src="${launcherIcon}"
|
|
63
|
+
alt="Copilot chat launcher"
|
|
64
|
+
style="width: 38px; height: 38px; object-fit: contain; border-radius: 50%; pointer-events: none;"
|
|
65
|
+
/>
|
|
66
|
+
`;
|
|
67
|
+
|
|
68
|
+
Object.assign(btn.style, {
|
|
69
|
+
position: "fixed",
|
|
70
|
+
bottom: "24px",
|
|
71
|
+
right: "24px",
|
|
72
|
+
width: `${BUTTON_SIZE}px`,
|
|
73
|
+
height: `${BUTTON_SIZE}px`,
|
|
74
|
+
borderRadius: "50%",
|
|
75
|
+
border: "none",
|
|
76
|
+
background: "linear-gradient(135deg, #0078ff, #00c6ff)",
|
|
77
|
+
color: "white",
|
|
78
|
+
cursor: "pointer",
|
|
79
|
+
zIndex: 999998,
|
|
80
|
+
display: "flex",
|
|
81
|
+
alignItems: "center",
|
|
82
|
+
justifyContent: "center",
|
|
83
|
+
boxShadow: "0 6px 14px rgba(0,0,0,0.25)",
|
|
84
|
+
transition: "all 0.25s ease",
|
|
85
|
+
});
|
|
86
|
+
|
|
87
|
+
btn.onmouseover = () => {
|
|
88
|
+
btn.style.transform = "scale(1.12)";
|
|
89
|
+
btn.style.boxShadow = "0 10px 25px rgba(0,0,0,0.3)";
|
|
90
|
+
};
|
|
91
|
+
btn.onmouseout = () => {
|
|
92
|
+
btn.style.transform = "scale(1)";
|
|
93
|
+
btn.style.boxShadow = "0 6px 14px rgba(0,0,0,0.25)";
|
|
94
|
+
};
|
|
95
|
+
|
|
96
|
+
const container = document.createElement("div");
|
|
97
|
+
container.setAttribute("data-copilot-widget-root", "true");
|
|
98
|
+
Object.assign(container.style, {
|
|
99
|
+
display: "none",
|
|
100
|
+
position: "fixed",
|
|
101
|
+
bottom: `${BUTTON_SIZE + 36}px`,
|
|
102
|
+
right: "24px",
|
|
103
|
+
zIndex: "999999",
|
|
104
|
+
transformOrigin: "bottom right",
|
|
105
|
+
transform: "scale(0.8) translateY(20px)",
|
|
106
|
+
opacity: "0",
|
|
107
|
+
transition: "all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55)",
|
|
108
|
+
});
|
|
109
|
+
|
|
110
|
+
const arrow = document.createElement("div");
|
|
111
|
+
const arrowBorder = document.createElement("div");
|
|
112
|
+
const arrowFill = document.createElement("div");
|
|
113
|
+
|
|
114
|
+
Object.assign(arrow.style, {
|
|
115
|
+
position: "absolute",
|
|
116
|
+
bottom: "-14px",
|
|
117
|
+
right: "28px",
|
|
118
|
+
width: "30px",
|
|
119
|
+
height: "20px",
|
|
120
|
+
pointerEvents: "none",
|
|
121
|
+
display: "none",
|
|
122
|
+
zIndex: "1",
|
|
123
|
+
});
|
|
124
|
+
|
|
125
|
+
Object.assign(arrowBorder.style, {
|
|
126
|
+
position: "absolute",
|
|
127
|
+
bottom: "0",
|
|
128
|
+
left: "0",
|
|
129
|
+
right: "0",
|
|
130
|
+
margin: "0 auto",
|
|
131
|
+
width: "0",
|
|
132
|
+
height: "0",
|
|
133
|
+
borderLeft: "15px solid transparent",
|
|
134
|
+
borderRight: "15px solid transparent",
|
|
135
|
+
borderTop: "15px solid rgba(15,23,42,0.1)",
|
|
136
|
+
});
|
|
137
|
+
|
|
138
|
+
Object.assign(arrowFill.style, {
|
|
139
|
+
position: "absolute",
|
|
140
|
+
bottom: "2px",
|
|
141
|
+
left: "0",
|
|
142
|
+
right: "0",
|
|
143
|
+
margin: "0 auto",
|
|
144
|
+
width: "0",
|
|
145
|
+
height: "0",
|
|
146
|
+
borderLeft: "13px solid transparent",
|
|
147
|
+
borderRight: "13px solid transparent",
|
|
148
|
+
borderTop: "13px solid white",
|
|
149
|
+
boxShadow: "0 6px 16px rgba(15,23,42,0.12)",
|
|
150
|
+
borderRadius: "2px",
|
|
151
|
+
});
|
|
152
|
+
|
|
153
|
+
arrow.appendChild(arrowBorder);
|
|
154
|
+
arrow.appendChild(arrowFill);
|
|
155
|
+
|
|
156
|
+
const frameWrapper = document.createElement("div");
|
|
157
|
+
Object.assign(frameWrapper.style, {
|
|
158
|
+
width: `${IFRAME_SIZE}px`,
|
|
159
|
+
maxWidth: "calc(100vw - 48px)",
|
|
160
|
+
height: `${Math.min(IFRAME_SIZE, Math.max(320, window.innerHeight - 140))}px`,
|
|
161
|
+
maxHeight: "calc(100vh - 150px)",
|
|
162
|
+
borderRadius: "20px",
|
|
163
|
+
background: "white",
|
|
164
|
+
border: "1px solid rgba(15,23,42,0.12)",
|
|
165
|
+
boxShadow: "0 18px 45px rgba(15,23,42,0.16)",
|
|
166
|
+
overflow: "hidden",
|
|
167
|
+
});
|
|
168
|
+
shadow.appendChild(frameWrapper);
|
|
169
|
+
|
|
170
|
+
const iframe = document.createElement("iframe");
|
|
171
|
+
iframe.src = iframeUrl;
|
|
172
|
+
iframe.title = "Copilot chat widget";
|
|
173
|
+
iframe.allow = "clipboard-read; clipboard-write; microphone; camera; display-capture";
|
|
174
|
+
iframe.setAttribute("scrolling", "no");
|
|
175
|
+
Object.assign(iframe.style, {
|
|
176
|
+
width: "100%",
|
|
177
|
+
height: "100%",
|
|
178
|
+
border: "none",
|
|
179
|
+
display: "block",
|
|
180
|
+
background: "transparent",
|
|
181
|
+
overflow: "hidden",
|
|
182
|
+
});
|
|
183
|
+
|
|
184
|
+
shadow.appendChild(frameWrapper);
|
|
185
|
+
frameWrapper.appendChild(iframe);
|
|
186
|
+
|
|
187
|
+
container.appendChild(arrow);
|
|
188
|
+
container.appendChild(frameWrapper);
|
|
189
|
+
document.body.appendChild(btn);
|
|
190
|
+
document.body.appendChild(container);
|
|
191
|
+
|
|
192
|
+
let isOpen = false;
|
|
193
|
+
|
|
194
|
+
const closeChat = () => {
|
|
195
|
+
if (!isOpen) return;
|
|
196
|
+
isOpen = false;
|
|
197
|
+
container.style.opacity = "0";
|
|
198
|
+
container.style.transform = "scale(0.8) translateY(20px)";
|
|
199
|
+
arrow.style.display = "none";
|
|
200
|
+
setTimeout(() => {
|
|
201
|
+
container.style.display = "none";
|
|
202
|
+
}, 250);
|
|
203
|
+
btn.style.transform = "scale(1)";
|
|
204
|
+
};
|
|
205
|
+
|
|
206
|
+
const handleWidgetMessage = (event) => {
|
|
207
|
+
const { data, source } = event || {};
|
|
208
|
+
if (!data?.type) return;
|
|
209
|
+
|
|
210
|
+
if (data.type === "CART_CHECKOUT" && source === iframe.contentWindow) {
|
|
211
|
+
console.log("[CopilotChat] Received checkout payload from widget:", data);
|
|
212
|
+
showCheckoutToast("Checkout message received from chat widget. Check console for payload.");
|
|
213
|
+
return;
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
if (data.type === "WIDGET_READY" && source === iframe.contentWindow) {
|
|
217
|
+
iframe.contentWindow.postMessage({ type: "INIT_WIDGET" }, "*");
|
|
218
|
+
return;
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
if (data.type === "CHAT_CLOSED") {
|
|
222
|
+
closeChat();
|
|
223
|
+
}
|
|
224
|
+
};
|
|
225
|
+
|
|
226
|
+
window.addEventListener("message", handleWidgetMessage);
|
|
227
|
+
|
|
228
|
+
btn.onclick = (event) => {
|
|
229
|
+
event.stopPropagation();
|
|
230
|
+
isOpen = !isOpen;
|
|
231
|
+
if (isOpen) {
|
|
232
|
+
container.style.display = "block";
|
|
233
|
+
arrow.style.display = "block";
|
|
234
|
+
requestAnimationFrame(() => {
|
|
235
|
+
container.style.opacity = "1";
|
|
236
|
+
container.style.transform = "scale(1) translateY(0)";
|
|
237
|
+
});
|
|
238
|
+
} else {
|
|
239
|
+
closeChat();
|
|
240
|
+
}
|
|
241
|
+
};
|
|
242
|
+
|
|
243
|
+
document.addEventListener("click", (event) => {
|
|
244
|
+
const target = event.target;
|
|
245
|
+
if (!target) return;
|
|
246
|
+
if (isOpen && !container.contains(target) && target !== btn) {
|
|
247
|
+
closeChat();
|
|
248
|
+
}
|
|
249
|
+
});
|
|
250
|
+
|
|
251
|
+
const controls = {
|
|
252
|
+
close: closeChat,
|
|
253
|
+
open: () => {
|
|
254
|
+
if (!isOpen) {
|
|
255
|
+
btn.click();
|
|
256
|
+
}
|
|
257
|
+
},
|
|
258
|
+
};
|
|
259
|
+
|
|
260
|
+
window.CopilotChat = window.CopilotChat || {};
|
|
261
|
+
window.CopilotChat.close = controls.close;
|
|
262
|
+
window.CopilotChat.open = controls.open;
|
|
263
|
+
window.CopilotChat.controls = controls;
|
|
264
|
+
|
|
265
|
+
return controls;
|
|
266
|
+
};
|
|
267
|
+
|
|
268
|
+
export async function loadCopilotChatWidget(options = {}) {
|
|
269
|
+
if (typeof window === "undefined" || typeof document === "undefined") {
|
|
270
|
+
return null;
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
const globalConfig = window.CopilotChatConfig || {};
|
|
274
|
+
const token =
|
|
275
|
+
options.token ||
|
|
276
|
+
globalConfig.token ||
|
|
277
|
+
(typeof window !== "undefined"
|
|
278
|
+
? window.localStorage?.getItem("copilotChatToken") || null
|
|
279
|
+
: null);
|
|
280
|
+
|
|
281
|
+
if (!token) {
|
|
282
|
+
console.error(
|
|
283
|
+
"[CopilotChat] Missing token (provide via loadCopilotChatWidget({ token }) or window.CopilotChatConfig.token)."
|
|
284
|
+
);
|
|
285
|
+
return null;
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
const baseUrl =
|
|
289
|
+
options.baseUrl ||
|
|
290
|
+
globalConfig.baseUrl ||
|
|
291
|
+
BUILD_BASE_URL ||
|
|
292
|
+
(typeof window !== "undefined" && window.location?.origin) ||
|
|
293
|
+
null;
|
|
294
|
+
|
|
295
|
+
if (!baseUrl) {
|
|
296
|
+
console.error(
|
|
297
|
+
"[CopilotChat] Missing baseUrl (set via loadCopilotChatWidget({ baseUrl }), window.CopilotChatConfig.baseUrl, or WIDGET_BASE_URL)."
|
|
298
|
+
);
|
|
299
|
+
return null;
|
|
300
|
+
}
|
|
301
|
+
|
|
302
|
+
const url = `${baseUrl.replace(/\/$/, "")}/api/chat-widget/config?token=${encodeURIComponent(
|
|
303
|
+
token
|
|
304
|
+
)}`;
|
|
305
|
+
|
|
306
|
+
try {
|
|
307
|
+
const response = await fetch(url, {
|
|
308
|
+
credentials: "omit",
|
|
309
|
+
mode: "cors",
|
|
310
|
+
});
|
|
311
|
+
|
|
312
|
+
if (!response.ok) {
|
|
313
|
+
throw new Error(`Server responded with ${response.status}`);
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
const remoteConfig = await response.json();
|
|
317
|
+
if (!remoteConfig?.iframeUrl || !remoteConfig?.launcherIcon) {
|
|
318
|
+
throw new Error("Received incomplete widget configuration from server.");
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
window.CopilotChat = window.CopilotChat || {};
|
|
322
|
+
window.CopilotChat.token = token;
|
|
323
|
+
window.CopilotChat.baseUrl = baseUrl;
|
|
324
|
+
|
|
325
|
+
return buildWidget({
|
|
326
|
+
iframeUrl: remoteConfig.iframeUrl,
|
|
327
|
+
launcherIcon: remoteConfig.launcherIcon,
|
|
328
|
+
});
|
|
329
|
+
} catch (error) {
|
|
330
|
+
console.error(
|
|
331
|
+
"[CopilotChat] Error during widget bootstrap:",
|
|
332
|
+
error instanceof Error ? error.message : error
|
|
333
|
+
);
|
|
334
|
+
return null;
|
|
335
|
+
}
|
|
336
|
+
}
|
|
337
|
+
|
|
338
|
+
export default loadCopilotChatWidget;
|
package/src/widget-runtime.js
CHANGED
|
@@ -57,47 +57,47 @@
|
|
|
57
57
|
|
|
58
58
|
return candidate || null;
|
|
59
59
|
};
|
|
60
|
-
|
|
61
|
-
const buildWidget = ({ iframeUrl, launcherIcon }) => {
|
|
62
|
-
const existingRoot = document.querySelector("[data-copilot-widget-root]");
|
|
63
|
-
if (existingRoot) {
|
|
64
|
-
existingRoot.remove();
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
const showCheckoutToast = (message) => {
|
|
68
|
-
const existingToast = document.querySelector("[data-copilot-checkout-toast]");
|
|
69
|
-
if (existingToast) {
|
|
70
|
-
existingToast.remove();
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
const toast = document.createElement("div");
|
|
74
|
-
toast.setAttribute("data-copilot-checkout-toast", "true");
|
|
75
|
-
toast.innerText = message;
|
|
76
|
-
|
|
77
|
-
Object.assign(toast.style, {
|
|
78
|
-
position: "fixed",
|
|
79
|
-
top: "20px",
|
|
80
|
-
left: "50%",
|
|
81
|
-
transform: "translateX(-50%)",
|
|
82
|
-
padding: "12px 16px",
|
|
83
|
-
background: "#0f172a",
|
|
84
|
-
color: "white",
|
|
85
|
-
borderRadius: "12px",
|
|
86
|
-
boxShadow: "0 8px 24px rgba(0,0,0,0.25)",
|
|
87
|
-
zIndex: 2147483647,
|
|
88
|
-
fontSize: "14px",
|
|
89
|
-
fontWeight: "600",
|
|
90
|
-
maxWidth: "420px",
|
|
91
|
-
lineHeight: "1.4",
|
|
92
|
-
textAlign: "center",
|
|
93
|
-
});
|
|
94
|
-
|
|
95
|
-
document.body.appendChild(toast);
|
|
96
|
-
|
|
97
|
-
setTimeout(() => {
|
|
98
|
-
toast.remove();
|
|
99
|
-
}, 4500);
|
|
100
|
-
};
|
|
60
|
+
|
|
61
|
+
const buildWidget = ({ iframeUrl, launcherIcon }) => {
|
|
62
|
+
const existingRoot = document.querySelector("[data-copilot-widget-root]");
|
|
63
|
+
if (existingRoot) {
|
|
64
|
+
existingRoot.remove();
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
const showCheckoutToast = (message) => {
|
|
68
|
+
const existingToast = document.querySelector("[data-copilot-checkout-toast]");
|
|
69
|
+
if (existingToast) {
|
|
70
|
+
existingToast.remove();
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
const toast = document.createElement("div");
|
|
74
|
+
toast.setAttribute("data-copilot-checkout-toast", "true");
|
|
75
|
+
toast.innerText = message;
|
|
76
|
+
|
|
77
|
+
Object.assign(toast.style, {
|
|
78
|
+
position: "fixed",
|
|
79
|
+
top: "20px",
|
|
80
|
+
left: "50%",
|
|
81
|
+
transform: "translateX(-50%)",
|
|
82
|
+
padding: "12px 16px",
|
|
83
|
+
background: "#0f172a",
|
|
84
|
+
color: "white",
|
|
85
|
+
borderRadius: "12px",
|
|
86
|
+
boxShadow: "0 8px 24px rgba(0,0,0,0.25)",
|
|
87
|
+
zIndex: 2147483647,
|
|
88
|
+
fontSize: "14px",
|
|
89
|
+
fontWeight: "600",
|
|
90
|
+
maxWidth: "420px",
|
|
91
|
+
lineHeight: "1.4",
|
|
92
|
+
textAlign: "center",
|
|
93
|
+
});
|
|
94
|
+
|
|
95
|
+
document.body.appendChild(toast);
|
|
96
|
+
|
|
97
|
+
setTimeout(() => {
|
|
98
|
+
toast.remove();
|
|
99
|
+
}, 4500);
|
|
100
|
+
};
|
|
101
101
|
|
|
102
102
|
// ---------- Shadow DOM container ----------
|
|
103
103
|
const containerHost = document.createElement("div");
|
|
@@ -256,42 +256,42 @@
|
|
|
256
256
|
btn.style.transform = "scale(1)";
|
|
257
257
|
};
|
|
258
258
|
|
|
259
|
-
const handleWidgetMessage = (event) => {
|
|
260
|
-
const { data, source } = event || {};
|
|
261
|
-
if (!data?.type) return;
|
|
262
|
-
|
|
263
|
-
if (data.type === "CART_CHECKOUT" && source === iframe.contentWindow) {
|
|
264
|
-
console.log("[CopilotChat] Received checkout payload from widget:", data);
|
|
265
|
-
showCheckoutToast("Checkout message received from chat widget. Check console for payload.");
|
|
266
|
-
return;
|
|
267
|
-
}
|
|
268
|
-
|
|
269
|
-
if (data.type === "WIDGET_READY" && source === iframe.contentWindow) {
|
|
270
|
-
iframe.contentWindow.postMessage({ type: "INIT_WIDGET" }, "*");
|
|
271
|
-
return;
|
|
272
|
-
}
|
|
273
|
-
|
|
274
|
-
if (data.type === "CHAT_CLOSED") {
|
|
275
|
-
closeChat();
|
|
276
|
-
}
|
|
277
|
-
};
|
|
278
|
-
|
|
279
|
-
btn.onclick = (event) => {
|
|
280
|
-
event.stopPropagation();
|
|
281
|
-
isOpen = !isOpen;
|
|
282
|
-
if (isOpen) {
|
|
283
|
-
container.style.display = "block";
|
|
284
|
-
arrow.style.display = "block";
|
|
285
|
-
requestAnimationFrame(() => {
|
|
286
|
-
container.style.opacity = "1";
|
|
287
|
-
container.style.transform = "scale(1) translateY(0)";
|
|
288
|
-
});
|
|
289
|
-
} else {
|
|
290
|
-
closeChat();
|
|
291
|
-
}
|
|
292
|
-
};
|
|
293
|
-
|
|
294
|
-
window.addEventListener("message", handleWidgetMessage);
|
|
259
|
+
const handleWidgetMessage = (event) => {
|
|
260
|
+
const { data, source } = event || {};
|
|
261
|
+
if (!data?.type) return;
|
|
262
|
+
|
|
263
|
+
if (data.type === "CART_CHECKOUT" && source === iframe.contentWindow) {
|
|
264
|
+
console.log("[CopilotChat] Received checkout payload from widget:", data);
|
|
265
|
+
showCheckoutToast("Checkout message received from chat widget. Check console for payload.");
|
|
266
|
+
return;
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
if (data.type === "WIDGET_READY" && source === iframe.contentWindow) {
|
|
270
|
+
iframe.contentWindow.postMessage({ type: "INIT_WIDGET" }, "*");
|
|
271
|
+
return;
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
if (data.type === "CHAT_CLOSED") {
|
|
275
|
+
closeChat();
|
|
276
|
+
}
|
|
277
|
+
};
|
|
278
|
+
|
|
279
|
+
btn.onclick = (event) => {
|
|
280
|
+
event.stopPropagation();
|
|
281
|
+
isOpen = !isOpen;
|
|
282
|
+
if (isOpen) {
|
|
283
|
+
container.style.display = "block";
|
|
284
|
+
arrow.style.display = "block";
|
|
285
|
+
requestAnimationFrame(() => {
|
|
286
|
+
container.style.opacity = "1";
|
|
287
|
+
container.style.transform = "scale(1) translateY(0)";
|
|
288
|
+
});
|
|
289
|
+
} else {
|
|
290
|
+
closeChat();
|
|
291
|
+
}
|
|
292
|
+
};
|
|
293
|
+
|
|
294
|
+
window.addEventListener("message", handleWidgetMessage);
|
|
295
295
|
|
|
296
296
|
document.addEventListener("click", (event) => {
|
|
297
297
|
const target = event.target;
|