copilot-chat-widget 0.1.22 → 0.1.24
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.cjs +3 -3
- package/dist/index.mjs +40 -40
- package/package.json +1 -1
- package/src/index.js +36 -36
package/dist/index.cjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const v="http://localhost:3000",
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const v="http://localhost:3000",m=64,y=720,T=({iframeUrl:b,launcherIcon:u})=>{const i=document.querySelector("[data-copilot-widget-root]");i&&i.remove();const d=s=>{const o=document.querySelector("[data-copilot-checkout-toast]");o&&o.remove();const r=document.createElement("div");r.setAttribute("data-copilot-checkout-toast","true"),r.innerText=s,Object.assign(r.style,{position:"fixed",top:"20px",left:"50%",transform:"translateX(-50%)",padding:"12px 16px",background:"#0f172a",color:"white",borderRadius:"12px",boxShadow:"0 8px 24px rgba(0,0,0,0.25)",zIndex:2147483647,fontSize:"14px",fontWeight:"600",maxWidth:"420px",lineHeight:"1.4",textAlign:"center"}),document.body.appendChild(r),setTimeout(()=>{r.remove()},4500)},g=document.createElement("div");g.setAttribute("data-copilot-widget-root","true");const x=g.attachShadow({mode:"open"});document.body.appendChild(g);const t=document.createElement("button");t.type="button",t.setAttribute("aria-label","Open Copilot chat"),t.innerHTML=`
|
|
2
2
|
<img
|
|
3
|
-
src="${
|
|
3
|
+
src="${u}"
|
|
4
4
|
alt="Copilot chat launcher"
|
|
5
5
|
style="width: 38px; height: 38px; object-fit: contain; border-radius: 50%; pointer-events: none;"
|
|
6
6
|
/>
|
|
7
|
-
`,Object.assign(t.style,{position:"fixed",bottom:"24px",right:"24px",width:`${
|
|
7
|
+
`,Object.assign(t.style,{position:"fixed",bottom:"24px",right:"24px",width:`${m}px`,height:`${m}px`,borderRadius:"50%",border:"none",background:"linear-gradient(135deg, #0078ff, #00c6ff)",color:"white",cursor:"pointer",zIndex:999998,display:"flex",alignItems:"center",justifyContent:"center",boxShadow:"0 6px 14px rgba(0,0,0,0.25)",transition:"all 0.25s ease"}),t.onmouseover=()=>{t.style.transform="scale(1.12)",t.style.boxShadow="0 10px 25px rgba(0,0,0,0.3)"},t.onmouseout=()=>{t.style.transform="scale(1)",t.style.boxShadow="0 6px 14px rgba(0,0,0,0.25)"};const e=document.createElement("div");e.setAttribute("data-copilot-widget-root","true"),Object.assign(e.style,{display:"none",position:"fixed",bottom:`${m+36}px`,right:"24px",zIndex:"999999",transformOrigin:"bottom right",transform:"scale(0.8) translateY(20px)",opacity:"0",transition:"all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55)"});const l=document.createElement("div"),f=document.createElement("div"),w=document.createElement("div");Object.assign(l.style,{position:"absolute",bottom:"-14px",right:"28px",width:"30px",height:"20px",pointerEvents:"none",display:"none",zIndex:"1"}),Object.assign(f.style,{position:"absolute",bottom:"0",left:"0",right:"0",margin:"0 auto",width:"0",height:"0",borderLeft:"15px solid transparent",borderRight:"15px solid transparent",borderTop:"15px solid rgba(15,23,42,0.1)"}),Object.assign(w.style,{position:"absolute",bottom:"2px",left:"0",right:"0",margin:"0 auto",width:"0",height:"0",borderLeft:"13px solid transparent",borderRight:"13px solid transparent",borderTop:"13px solid white",boxShadow:"0 6px 16px rgba(15,23,42,0.12)",borderRadius:"2px"}),l.appendChild(f),l.appendChild(w);const c=document.createElement("div");Object.assign(c.style,{width:`${y}px`,maxWidth:"calc(100vw - 48px)",height:`${Math.min(y,Math.max(320,window.innerHeight-140))}px`,maxHeight:"calc(100vh - 150px)",borderRadius:"20px",background:"white",border:"1px solid rgba(15,23,42,0.12)",boxShadow:"0 18px 45px rgba(15,23,42,0.16)",overflow:"hidden"}),x.appendChild(c);const n=document.createElement("iframe");n.src=b,n.title="Copilot chat widget",n.allow="clipboard-read; clipboard-write; microphone; camera; display-capture",n.setAttribute("scrolling","no"),Object.assign(n.style,{width:"100%",height:"100%",border:"none",display:"block",background:"transparent",overflow:"hidden"}),x.appendChild(c),c.appendChild(n),e.appendChild(l),e.appendChild(c),document.body.appendChild(t),document.body.appendChild(e);let a=!1;const p=()=>{a&&(a=!1,e.style.opacity="0",e.style.transform="scale(0.8) translateY(20px)",l.style.display="none",setTimeout(()=>{e.style.display="none"},250),t.style.transform="scale(1)")},E=s=>{const{data:o,source:r}=s||{};if(o?.type){if(o.type==="CART_CHECKOUT"&&r===n.contentWindow){console.log("[CopilotChat] Received checkout payload from widget:",o),d("Checkout message received from chat widget. Check console for payload.");return}if(o.type==="WIDGET_READY"&&r===n.contentWindow){n.contentWindow.postMessage({type:"INIT_WIDGET"},"*");return}o.type==="CHAT_CLOSED"&&p()}};window.addEventListener("message",E),t.onclick=s=>{s.stopPropagation(),a=!a,a?(e.style.display="block",l.style.display="block",requestAnimationFrame(()=>{e.style.opacity="1",e.style.transform="scale(1) translateY(0)"}),n.contentWindow&&n.contentWindow.postMessage({type:"CHAT_OPENED"},"*")):p()},document.addEventListener("click",s=>{const o=s.target;o&&a&&!e.contains(o)&&o!==t&&p()});const h={close:p,open:()=>{a||t.click()}};return window.CopilotChat=window.CopilotChat||{},window.CopilotChat.close=h.close,window.CopilotChat.open=h.open,window.CopilotChat.controls=h,h};async function C(){if(typeof window>"u"||typeof document>"u")return null;const u=`${v.replace(/\/$/,"")}/api/chat-widget/config`;try{const i=await fetch(u,{credentials:"omit",mode:"cors"});if(!i.ok)throw new Error(`Server responded with ${i.status}`);const d=await i.json();if(!d?.iframeUrl||!d?.launcherIcon)throw new Error("Received incomplete widget configuration from server.");return T({iframeUrl:d.iframeUrl,launcherIcon:d.launcherIcon})}catch(i){return console.error("[CopilotChat] Error during widget bootstrap:",i instanceof Error?i.message:i),null}}exports.default=C;exports.loadCopilotChatWidget=C;
|
package/dist/index.mjs
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
const y = "http://localhost:3000";
|
|
2
|
-
const C = ({ iframeUrl:
|
|
3
|
-
const
|
|
4
|
-
|
|
5
|
-
const
|
|
2
|
+
const C = ({ iframeUrl: m, launcherIcon: u }) => {
|
|
3
|
+
const i = document.querySelector("[data-copilot-widget-root]");
|
|
4
|
+
i && i.remove();
|
|
5
|
+
const d = (s) => {
|
|
6
6
|
const o = document.querySelector("[data-copilot-checkout-toast]");
|
|
7
7
|
o && o.remove();
|
|
8
|
-
const
|
|
9
|
-
|
|
8
|
+
const r = document.createElement("div");
|
|
9
|
+
r.setAttribute("data-copilot-checkout-toast", "true"), r.innerText = s, Object.assign(r.style, {
|
|
10
10
|
position: "fixed",
|
|
11
11
|
top: "20px",
|
|
12
12
|
left: "50%",
|
|
@@ -22,17 +22,17 @@ const C = ({ iframeUrl: g, launcherIcon: m }) => {
|
|
|
22
22
|
maxWidth: "420px",
|
|
23
23
|
lineHeight: "1.4",
|
|
24
24
|
textAlign: "center"
|
|
25
|
-
}), document.body.appendChild(
|
|
26
|
-
|
|
25
|
+
}), document.body.appendChild(r), setTimeout(() => {
|
|
26
|
+
r.remove();
|
|
27
27
|
}, 4500);
|
|
28
|
-
},
|
|
29
|
-
|
|
30
|
-
const b =
|
|
31
|
-
document.body.appendChild(
|
|
28
|
+
}, g = document.createElement("div");
|
|
29
|
+
g.setAttribute("data-copilot-widget-root", "true");
|
|
30
|
+
const b = g.attachShadow({ mode: "open" });
|
|
31
|
+
document.body.appendChild(g);
|
|
32
32
|
const t = document.createElement("button");
|
|
33
33
|
t.type = "button", t.setAttribute("aria-label", "Open Copilot chat"), t.innerHTML = `
|
|
34
34
|
<img
|
|
35
|
-
src="${
|
|
35
|
+
src="${u}"
|
|
36
36
|
alt="Copilot chat launcher"
|
|
37
37
|
style="width: 38px; height: 38px; object-fit: contain; border-radius: 50%; pointer-events: none;"
|
|
38
38
|
/>
|
|
@@ -118,7 +118,7 @@ const C = ({ iframeUrl: g, launcherIcon: m }) => {
|
|
|
118
118
|
overflow: "hidden"
|
|
119
119
|
}), b.appendChild(l);
|
|
120
120
|
const n = document.createElement("iframe");
|
|
121
|
-
n.src =
|
|
121
|
+
n.src = m, n.title = "Copilot chat widget", n.allow = "clipboard-read; clipboard-write; microphone; camera; display-capture", n.setAttribute("scrolling", "no"), Object.assign(n.style, {
|
|
122
122
|
width: "100%",
|
|
123
123
|
height: "100%",
|
|
124
124
|
border: "none",
|
|
@@ -126,58 +126,58 @@ const C = ({ iframeUrl: g, launcherIcon: m }) => {
|
|
|
126
126
|
background: "transparent",
|
|
127
127
|
overflow: "hidden"
|
|
128
128
|
}), b.appendChild(l), l.appendChild(n), e.appendChild(c), e.appendChild(l), document.body.appendChild(t), document.body.appendChild(e);
|
|
129
|
-
let
|
|
130
|
-
const
|
|
131
|
-
|
|
129
|
+
let a = !1;
|
|
130
|
+
const p = () => {
|
|
131
|
+
a && (a = !1, e.style.opacity = "0", e.style.transform = "scale(0.8) translateY(20px)", c.style.display = "none", setTimeout(() => {
|
|
132
132
|
e.style.display = "none";
|
|
133
133
|
}, 250), t.style.transform = "scale(1)");
|
|
134
|
-
}, w = (
|
|
135
|
-
const { data: o, source:
|
|
134
|
+
}, w = (s) => {
|
|
135
|
+
const { data: o, source: r } = s || {};
|
|
136
136
|
if (o?.type) {
|
|
137
|
-
if (o.type === "CART_CHECKOUT" &&
|
|
138
|
-
console.log("[CopilotChat] Received checkout payload from widget:", o),
|
|
137
|
+
if (o.type === "CART_CHECKOUT" && r === n.contentWindow) {
|
|
138
|
+
console.log("[CopilotChat] Received checkout payload from widget:", o), d("Checkout message received from chat widget. Check console for payload.");
|
|
139
139
|
return;
|
|
140
140
|
}
|
|
141
|
-
if (o.type === "WIDGET_READY" &&
|
|
141
|
+
if (o.type === "WIDGET_READY" && r === n.contentWindow) {
|
|
142
142
|
n.contentWindow.postMessage({ type: "INIT_WIDGET" }, "*");
|
|
143
143
|
return;
|
|
144
144
|
}
|
|
145
|
-
o.type === "CHAT_CLOSED" &&
|
|
145
|
+
o.type === "CHAT_CLOSED" && p();
|
|
146
146
|
}
|
|
147
147
|
};
|
|
148
|
-
window.addEventListener("message", w), t.onclick = (
|
|
149
|
-
|
|
148
|
+
window.addEventListener("message", w), t.onclick = (s) => {
|
|
149
|
+
s.stopPropagation(), a = !a, a ? (e.style.display = "block", c.style.display = "block", requestAnimationFrame(() => {
|
|
150
150
|
e.style.opacity = "1", e.style.transform = "scale(1) translateY(0)";
|
|
151
|
-
}), n.contentWindow && n.contentWindow.postMessage({ type: "CHAT_OPENED" }, "*")) :
|
|
152
|
-
}, document.addEventListener("click", (
|
|
153
|
-
const o =
|
|
154
|
-
o &&
|
|
151
|
+
}), n.contentWindow && n.contentWindow.postMessage({ type: "CHAT_OPENED" }, "*")) : p();
|
|
152
|
+
}, document.addEventListener("click", (s) => {
|
|
153
|
+
const o = s.target;
|
|
154
|
+
o && a && !e.contains(o) && o !== t && p();
|
|
155
155
|
});
|
|
156
|
-
const
|
|
157
|
-
close:
|
|
156
|
+
const h = {
|
|
157
|
+
close: p,
|
|
158
158
|
open: () => {
|
|
159
|
-
|
|
159
|
+
a || t.click();
|
|
160
160
|
}
|
|
161
161
|
};
|
|
162
|
-
return window.CopilotChat = window.CopilotChat || {}, window.CopilotChat.close =
|
|
162
|
+
return window.CopilotChat = window.CopilotChat || {}, window.CopilotChat.close = h.close, window.CopilotChat.open = h.open, window.CopilotChat.controls = h, h;
|
|
163
163
|
};
|
|
164
|
-
async function E(
|
|
164
|
+
async function E() {
|
|
165
165
|
if (typeof window > "u" || typeof document > "u")
|
|
166
166
|
return null;
|
|
167
|
-
const
|
|
167
|
+
const u = `${y.replace(/\/$/, "")}/api/chat-widget/config`;
|
|
168
168
|
try {
|
|
169
|
-
const i = await fetch(
|
|
169
|
+
const i = await fetch(u, {
|
|
170
170
|
credentials: "omit",
|
|
171
171
|
mode: "cors"
|
|
172
172
|
});
|
|
173
173
|
if (!i.ok)
|
|
174
174
|
throw new Error(`Server responded with ${i.status}`);
|
|
175
|
-
const
|
|
176
|
-
if (!
|
|
175
|
+
const d = await i.json();
|
|
176
|
+
if (!d?.iframeUrl || !d?.launcherIcon)
|
|
177
177
|
throw new Error("Received incomplete widget configuration from server.");
|
|
178
178
|
return C({
|
|
179
|
-
iframeUrl:
|
|
180
|
-
launcherIcon:
|
|
179
|
+
iframeUrl: d.iframeUrl,
|
|
180
|
+
launcherIcon: d.launcherIcon
|
|
181
181
|
});
|
|
182
182
|
} catch (i) {
|
|
183
183
|
return console.error(
|
package/package.json
CHANGED
package/src/index.js
CHANGED
|
@@ -225,23 +225,23 @@ const buildWidget = ({ iframeUrl, launcherIcon }) => {
|
|
|
225
225
|
|
|
226
226
|
window.addEventListener("message", handleWidgetMessage);
|
|
227
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
|
-
if (iframe.contentWindow) {
|
|
239
|
-
iframe.contentWindow.postMessage({ type: "CHAT_OPENED" }, "*");
|
|
240
|
-
}
|
|
241
|
-
} else {
|
|
242
|
-
closeChat();
|
|
243
|
-
}
|
|
244
|
-
};
|
|
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
|
+
if (iframe.contentWindow) {
|
|
239
|
+
iframe.contentWindow.postMessage({ type: "CHAT_OPENED" }, "*");
|
|
240
|
+
}
|
|
241
|
+
} else {
|
|
242
|
+
closeChat();
|
|
243
|
+
}
|
|
244
|
+
};
|
|
245
245
|
|
|
246
246
|
document.addEventListener("click", (event) => {
|
|
247
247
|
const target = event.target;
|
|
@@ -268,22 +268,22 @@ const buildWidget = ({ iframeUrl, launcherIcon }) => {
|
|
|
268
268
|
return controls;
|
|
269
269
|
};
|
|
270
270
|
|
|
271
|
-
export async function loadCopilotChatWidget(
|
|
272
|
-
if (typeof window === "undefined" || typeof document === "undefined") {
|
|
273
|
-
return null;
|
|
274
|
-
}
|
|
275
|
-
|
|
276
|
-
const baseUrl =
|
|
277
|
-
BUILD_BASE_URL ||
|
|
278
|
-
(typeof window !== "undefined" && window.location?.origin) ||
|
|
279
|
-
null;
|
|
280
|
-
|
|
281
|
-
if (!baseUrl) {
|
|
282
|
-
console.error("[CopilotChat] Unable to resolve widget base URL.");
|
|
283
|
-
return null;
|
|
284
|
-
}
|
|
285
|
-
|
|
286
|
-
const url = `${baseUrl.replace(/\/$/, "")}/api/chat-widget/config`;
|
|
271
|
+
export async function loadCopilotChatWidget() {
|
|
272
|
+
if (typeof window === "undefined" || typeof document === "undefined") {
|
|
273
|
+
return null;
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
const baseUrl =
|
|
277
|
+
BUILD_BASE_URL ||
|
|
278
|
+
(typeof window !== "undefined" && window.location?.origin) ||
|
|
279
|
+
null;
|
|
280
|
+
|
|
281
|
+
if (!baseUrl) {
|
|
282
|
+
console.error("[CopilotChat] Unable to resolve widget base URL.");
|
|
283
|
+
return null;
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
const url = `${baseUrl.replace(/\/$/, "")}/api/chat-widget/config`;
|
|
287
287
|
|
|
288
288
|
try {
|
|
289
289
|
const response = await fetch(url, {
|
|
@@ -300,9 +300,9 @@ export async function loadCopilotChatWidget(options = {}) {
|
|
|
300
300
|
throw new Error("Received incomplete widget configuration from server.");
|
|
301
301
|
}
|
|
302
302
|
|
|
303
|
-
return buildWidget({
|
|
304
|
-
iframeUrl: remoteConfig.iframeUrl,
|
|
305
|
-
launcherIcon: remoteConfig.launcherIcon,
|
|
303
|
+
return buildWidget({
|
|
304
|
+
iframeUrl: remoteConfig.iframeUrl,
|
|
305
|
+
launcherIcon: remoteConfig.launcherIcon,
|
|
306
306
|
});
|
|
307
307
|
} catch (error) {
|
|
308
308
|
console.error(
|