copilot-chat-widget 0.1.18 → 0.1.19
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 +20 -27
- package/dist/chat-widget.min.js +3 -3
- package/dist/index.cjs +3 -3
- package/dist/index.mjs +43 -50
- package/package.json +1 -1
- package/src/index.d.ts +4 -5
- package/src/index.js +13 -29
- package/src/widget-runtime.js +24 -79
package/README.md
CHANGED
|
@@ -13,13 +13,12 @@ yarn add copilot-chat-widget
|
|
|
13
13
|
```js
|
|
14
14
|
import { loadCopilotChatWidget } from "copilot-chat-widget";
|
|
15
15
|
|
|
16
|
-
loadCopilotChatWidget({
|
|
17
|
-
|
|
18
|
-
//
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
`loadCopilotChatWidget` injects the standalone script (`chat-widget.min.js`) and bootstraps the widget using the provided `token`.
|
|
16
|
+
loadCopilotChatWidget({
|
|
17
|
+
// optional: baseUrl if backend is on a different origin
|
|
18
|
+
// baseUrl: "https://your-backend-domain"
|
|
19
|
+
});
|
|
20
|
+
```
|
|
21
|
+
`loadCopilotChatWidget` fetches widget config from `/api/chat-widget/config` and mounts the chat bubble.
|
|
23
22
|
|
|
24
23
|
### React/Next.js example
|
|
25
24
|
```jsx
|
|
@@ -27,12 +26,11 @@ import { useEffect } from "react";
|
|
|
27
26
|
import { loadCopilotChatWidget } from "copilot-chat-widget";
|
|
28
27
|
|
|
29
28
|
export default function Page() {
|
|
30
|
-
useEffect(() => {
|
|
31
|
-
loadCopilotChatWidget({
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
}, []);
|
|
29
|
+
useEffect(() => {
|
|
30
|
+
loadCopilotChatWidget({
|
|
31
|
+
baseUrl: process.env.NEXT_PUBLIC_WIDGET_BASE_URL // optional override if backend is another origin
|
|
32
|
+
});
|
|
33
|
+
}, []);
|
|
36
34
|
|
|
37
35
|
return <main>Your page content</main>;
|
|
38
36
|
}
|
|
@@ -40,20 +38,15 @@ export default function Page() {
|
|
|
40
38
|
|
|
41
39
|
## Usage (script tag)
|
|
42
40
|
```html
|
|
43
|
-
<script
|
|
44
|
-
src="https://cdn.example.com/chat-widget.min.js"
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
- `
|
|
51
|
-
- `
|
|
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.
|
|
41
|
+
<script
|
|
42
|
+
src="https://cdn.example.com/chat-widget.min.js"
|
|
43
|
+
></script>
|
|
44
|
+
```
|
|
45
|
+
- `data-autoload="false"`: if you want to insert the script but call `window.CopilotChat.init()` manually.
|
|
46
|
+
|
|
47
|
+
## Configuration
|
|
48
|
+
- `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.
|
|
49
|
+
- `autoload` (boolean): set `false` to defer bootstrap and call `window.CopilotChat.load()` yourself.
|
|
57
50
|
|
|
58
51
|
Runtime controls (after script loads):
|
|
59
52
|
```js
|
package/dist/chat-widget.min.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
(function(){"use strict";(()=>{if(typeof window>"u"||typeof document>"u"||window.__copilotWidgetLoaded)return;window.__copilotWidgetLoaded=!0;const
|
|
1
|
+
(function(){"use strict";(()=>{if(typeof window>"u"||typeof document>"u"||window.__copilotWidgetLoaded)return;window.__copilotWidgetLoaded=!0;const S="http://localhost:3000",g=64,f=720,x=document.currentScript,k=e=>{document.readyState==="complete"||document.readyState==="interactive"?setTimeout(e,0):document.addEventListener("DOMContentLoaded",e)},C=()=>x||Array.from(document.querySelectorAll("script")).reverse().find(r=>r.dataset?.token||r.src&&r.src.includes("chat-widget"))||null,I=({iframeUrl:e,launcherIcon:h})=>{const r=document.querySelector("[data-copilot-widget-root]");r&&r.remove();const a=l=>{const n=document.querySelector("[data-copilot-checkout-toast]");n&&n.remove();const d=document.createElement("div");d.setAttribute("data-copilot-checkout-toast","true"),d.innerText=l,Object.assign(d.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(d),setTimeout(()=>{d.remove()},4500)},s=document.createElement("div");s.setAttribute("data-copilot-widget-root","true");const b=s.attachShadow({mode:"open"});document.body.appendChild(s);const t=document.createElement("button");t.type="button",t.setAttribute("aria-label","Open Copilot chat"),t.innerHTML=`
|
|
2
2
|
<img
|
|
3
|
-
src="${
|
|
3
|
+
src="${h}"
|
|
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(
|
|
7
|
+
`,Object.assign(t.style,{position:"fixed",bottom:"24px",right:"24px",width:`${g}px`,height:`${g}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 o=document.createElement("div");o.setAttribute("data-copilot-widget-root","true"),Object.assign(o.style,{display:"none",position:"fixed",bottom:`${g+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 p=document.createElement("div"),E=document.createElement("div"),v=document.createElement("div");Object.assign(p.style,{position:"absolute",bottom:"-14px",right:"28px",width:"30px",height:"20px",pointerEvents:"none",display:"none",zIndex:"1"}),Object.assign(E.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(v.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"}),p.appendChild(E),p.appendChild(v);const u=document.createElement("div");Object.assign(u.style,{width:`${f}px`,maxWidth:"calc(100vw - 48px)",height:`${Math.min(f,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"}),b.appendChild(u);const i=document.createElement("iframe");i.src=e,i.title="Copilot chat widget",i.allow="clipboard-read; clipboard-write; microphone; camera; display-capture",i.setAttribute("scrolling","no"),Object.assign(i.style,{width:"100%",height:"100%",border:"none",display:"block",background:"transparent",overflow:"hidden"}),b.appendChild(u),u.appendChild(i),o.appendChild(p),o.appendChild(u),document.body.appendChild(t),document.body.appendChild(o);let c=!1;const m=()=>{c&&(c=!1,o.style.opacity="0",o.style.transform="scale(0.8) translateY(20px)",p.style.display="none",setTimeout(()=>{o.style.display="none"},250),t.style.transform="scale(1)")},O=l=>{const{data:n,source:d}=l||{};if(n?.type){if(n.type==="CART_CHECKOUT"&&d===i.contentWindow){console.log("[CopilotChat] Received checkout payload from widget:",n),a("Checkout message received from chat widget. Check console for payload.");return}if(n.type==="WIDGET_READY"&&d===i.contentWindow){i.contentWindow.postMessage({type:"INIT_WIDGET"},"*");return}n.type==="CHAT_CLOSED"&&m()}};t.onclick=l=>{l.stopPropagation(),c=!c,c?(o.style.display="block",p.style.display="block",requestAnimationFrame(()=>{o.style.opacity="1",o.style.transform="scale(1) translateY(0)"})):m()},window.addEventListener("message",O),document.addEventListener("click",l=>{const n=l.target;n&&c&&!o.contains(n)&&n!==t&&m()});const w={close:m,open:()=>{c||t.click()}};return window.CopilotChat=window.CopilotChat||{},window.CopilotChat.close=w.close,window.CopilotChat.open=w.open,window.CopilotChat.controls=w,w},T=e=>{console.error(`[CopilotChat] ${e}`)},A=()=>{const e=C();return e?(e.dataset||{}).autoload!=="false":!1},y=async(e={})=>{e.scriptEl||C();const h=window.CopilotChatConfig||{},r=e.baseUrl||h.baseUrl||S;try{const a=await fetch(`${r}/api/chat-widget/config`,{credentials:"omit",mode:"cors"});if(!a.ok)throw new Error(`Server responded with ${a.status}`);const s=await a.json();if(!s?.iframeUrl||!s?.launcherIcon)throw new Error("Received incomplete widget configuration from server.");return window.CopilotChat=window.CopilotChat||{},window.CopilotChat.init=(t={})=>{const o={iframeUrl:t.iframeUrl||s.iframeUrl,launcherIcon:t.launcherIcon||s.launcherIcon};return I(o)},window.CopilotChat.init(e)}catch(a){return T(a instanceof Error?a.message:"Unknown error during widget bootstrap."),null}};A()&&k(()=>{y()}),window.CopilotChat=window.CopilotChat||{},window.CopilotChat.load=y})()})();
|
package/dist/index.cjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const E="http://localhost:3000",w=64,y=720,k=({iframeUrl:g,launcherIcon:b})=>{const c=document.querySelector("[data-copilot-widget-root]");c&&c.remove();const m=d=>{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=d,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)},n=document.createElement("div");n.setAttribute("data-copilot-widget-root","true");const a=n.attachShadow({mode:"open"});document.body.appendChild(n);const t=document.createElement("button");t.type="button",t.setAttribute("aria-label","Open Copilot chat"),t.innerHTML=`
|
|
2
2
|
<img
|
|
3
|
-
src="${
|
|
3
|
+
src="${b}"
|
|
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:`${w}px`,height:`${w}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:`${w+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"),x=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(x.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(x);const p=document.createElement("div");Object.assign(p.style,{width:`${
|
|
7
|
+
`,Object.assign(t.style,{position:"fixed",bottom:"24px",right:"24px",width:`${w}px`,height:`${w}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:`${w+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"),x=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(x.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(x);const p=document.createElement("div");Object.assign(p.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"}),a.appendChild(p);const i=document.createElement("iframe");i.src=g,i.title="Copilot chat widget",i.allow="clipboard-read; clipboard-write; microphone; camera; display-capture",i.setAttribute("scrolling","no"),Object.assign(i.style,{width:"100%",height:"100%",border:"none",display:"block",background:"transparent",overflow:"hidden"}),a.appendChild(p),p.appendChild(i),e.appendChild(l),e.appendChild(p),document.body.appendChild(t),document.body.appendChild(e);let s=!1;const h=()=>{s&&(s=!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)")},v=d=>{const{data:o,source:r}=d||{};if(o?.type){if(o.type==="CART_CHECKOUT"&&r===i.contentWindow){console.log("[CopilotChat] Received checkout payload from widget:",o),m("Checkout message received from chat widget. Check console for payload.");return}if(o.type==="WIDGET_READY"&&r===i.contentWindow){i.contentWindow.postMessage({type:"INIT_WIDGET"},"*");return}o.type==="CHAT_CLOSED"&&h()}};window.addEventListener("message",v),t.onclick=d=>{d.stopPropagation(),s=!s,s?(e.style.display="block",l.style.display="block",requestAnimationFrame(()=>{e.style.opacity="1",e.style.transform="scale(1) translateY(0)"})):h()},document.addEventListener("click",d=>{const o=d.target;o&&s&&!e.contains(o)&&o!==t&&h()});const u={close:h,open:()=>{s||t.click()}};return window.CopilotChat=window.CopilotChat||{},window.CopilotChat.close=u.close,window.CopilotChat.open=u.open,window.CopilotChat.controls=u,u};async function C(g={}){if(typeof window>"u"||typeof document>"u")return null;const b=window.CopilotChatConfig||{},c=g.baseUrl||b.baseUrl||E,m=`${c.replace(/\/$/,"")}/api/chat-widget/config`;try{const n=await fetch(m,{credentials:"omit",mode:"cors"});if(!n.ok)throw new Error(`Server responded with ${n.status}`);const a=await n.json();if(!a?.iframeUrl||!a?.launcherIcon)throw new Error("Received incomplete widget configuration from server.");return window.CopilotChat=window.CopilotChat||{},window.CopilotChat.baseUrl=c,k({iframeUrl:a.iframeUrl,launcherIcon:a.launcherIcon})}catch(n){return console.error("[CopilotChat] Error during widget bootstrap:",n instanceof Error?n.message:n),null}}exports.default=C;exports.loadCopilotChatWidget=C;
|
package/dist/index.mjs
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
const
|
|
2
|
-
const
|
|
3
|
-
const
|
|
4
|
-
|
|
5
|
-
const
|
|
1
|
+
const y = "http://localhost:3000";
|
|
2
|
+
const C = ({ iframeUrl: g, launcherIcon: b }) => {
|
|
3
|
+
const c = document.querySelector("[data-copilot-widget-root]");
|
|
4
|
+
c && c.remove();
|
|
5
|
+
const m = (d) => {
|
|
6
6
|
const o = document.querySelector("[data-copilot-checkout-toast]");
|
|
7
7
|
o && o.remove();
|
|
8
8
|
const r = document.createElement("div");
|
|
9
|
-
r.setAttribute("data-copilot-checkout-toast", "true"), r.innerText =
|
|
9
|
+
r.setAttribute("data-copilot-checkout-toast", "true"), r.innerText = d, Object.assign(r.style, {
|
|
10
10
|
position: "fixed",
|
|
11
11
|
top: "20px",
|
|
12
12
|
left: "50%",
|
|
@@ -25,14 +25,14 @@ const y = ({ iframeUrl: h, launcherIcon: u }) => {
|
|
|
25
25
|
}), document.body.appendChild(r), setTimeout(() => {
|
|
26
26
|
r.remove();
|
|
27
27
|
}, 4500);
|
|
28
|
-
},
|
|
29
|
-
|
|
30
|
-
const
|
|
31
|
-
document.body.appendChild(
|
|
28
|
+
}, n = document.createElement("div");
|
|
29
|
+
n.setAttribute("data-copilot-widget-root", "true");
|
|
30
|
+
const a = n.attachShadow({ mode: "open" });
|
|
31
|
+
document.body.appendChild(n);
|
|
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="${b}"
|
|
36
36
|
alt="Copilot chat launcher"
|
|
37
37
|
style="width: 38px; height: 38px; object-fit: contain; border-radius: 50%; pointer-events: none;"
|
|
38
38
|
/>
|
|
@@ -70,7 +70,7 @@ const y = ({ iframeUrl: h, launcherIcon: u }) => {
|
|
|
70
70
|
opacity: "0",
|
|
71
71
|
transition: "all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55)"
|
|
72
72
|
});
|
|
73
|
-
const l = document.createElement("div"),
|
|
73
|
+
const l = document.createElement("div"), w = document.createElement("div"), x = document.createElement("div");
|
|
74
74
|
Object.assign(l.style, {
|
|
75
75
|
position: "absolute",
|
|
76
76
|
bottom: "-14px",
|
|
@@ -80,7 +80,7 @@ const y = ({ iframeUrl: h, launcherIcon: u }) => {
|
|
|
80
80
|
pointerEvents: "none",
|
|
81
81
|
display: "none",
|
|
82
82
|
zIndex: "1"
|
|
83
|
-
}), Object.assign(
|
|
83
|
+
}), Object.assign(w.style, {
|
|
84
84
|
position: "absolute",
|
|
85
85
|
bottom: "0",
|
|
86
86
|
left: "0",
|
|
@@ -91,7 +91,7 @@ const y = ({ iframeUrl: h, launcherIcon: u }) => {
|
|
|
91
91
|
borderLeft: "15px solid transparent",
|
|
92
92
|
borderRight: "15px solid transparent",
|
|
93
93
|
borderTop: "15px solid rgba(15,23,42,0.1)"
|
|
94
|
-
}), Object.assign(
|
|
94
|
+
}), Object.assign(x.style, {
|
|
95
95
|
position: "absolute",
|
|
96
96
|
bottom: "2px",
|
|
97
97
|
left: "0",
|
|
@@ -104,7 +104,7 @@ const y = ({ iframeUrl: h, launcherIcon: u }) => {
|
|
|
104
104
|
borderTop: "13px solid white",
|
|
105
105
|
boxShadow: "0 6px 16px rgba(15,23,42,0.12)",
|
|
106
106
|
borderRadius: "2px"
|
|
107
|
-
}), l.appendChild(
|
|
107
|
+
}), l.appendChild(w), l.appendChild(x);
|
|
108
108
|
const p = document.createElement("div");
|
|
109
109
|
Object.assign(p.style, {
|
|
110
110
|
width: "720px",
|
|
@@ -116,75 +116,68 @@ const y = ({ iframeUrl: h, launcherIcon: u }) => {
|
|
|
116
116
|
border: "1px solid rgba(15,23,42,0.12)",
|
|
117
117
|
boxShadow: "0 18px 45px rgba(15,23,42,0.16)",
|
|
118
118
|
overflow: "hidden"
|
|
119
|
-
}),
|
|
119
|
+
}), a.appendChild(p);
|
|
120
120
|
const i = document.createElement("iframe");
|
|
121
|
-
i.src =
|
|
121
|
+
i.src = g, i.title = "Copilot chat widget", i.allow = "clipboard-read; clipboard-write; microphone; camera; display-capture", i.setAttribute("scrolling", "no"), Object.assign(i.style, {
|
|
122
122
|
width: "100%",
|
|
123
123
|
height: "100%",
|
|
124
124
|
border: "none",
|
|
125
125
|
display: "block",
|
|
126
126
|
background: "transparent",
|
|
127
127
|
overflow: "hidden"
|
|
128
|
-
}),
|
|
129
|
-
let
|
|
130
|
-
const
|
|
131
|
-
|
|
128
|
+
}), a.appendChild(p), p.appendChild(i), e.appendChild(l), e.appendChild(p), document.body.appendChild(t), document.body.appendChild(e);
|
|
129
|
+
let s = !1;
|
|
130
|
+
const h = () => {
|
|
131
|
+
s && (s = !1, e.style.opacity = "0", e.style.transform = "scale(0.8) translateY(20px)", l.style.display = "none", setTimeout(() => {
|
|
132
132
|
e.style.display = "none";
|
|
133
133
|
}, 250), t.style.transform = "scale(1)");
|
|
134
|
-
},
|
|
135
|
-
const { data: o, source: r } =
|
|
134
|
+
}, f = (d) => {
|
|
135
|
+
const { data: o, source: r } = d || {};
|
|
136
136
|
if (o?.type) {
|
|
137
137
|
if (o.type === "CART_CHECKOUT" && r === i.contentWindow) {
|
|
138
|
-
console.log("[CopilotChat] Received checkout payload from widget:", o),
|
|
138
|
+
console.log("[CopilotChat] Received checkout payload from widget:", o), m("Checkout message received from chat widget. Check console for payload.");
|
|
139
139
|
return;
|
|
140
140
|
}
|
|
141
141
|
if (o.type === "WIDGET_READY" && r === i.contentWindow) {
|
|
142
142
|
i.contentWindow.postMessage({ type: "INIT_WIDGET" }, "*");
|
|
143
143
|
return;
|
|
144
144
|
}
|
|
145
|
-
o.type === "CHAT_CLOSED" &&
|
|
145
|
+
o.type === "CHAT_CLOSED" && h();
|
|
146
146
|
}
|
|
147
147
|
};
|
|
148
|
-
window.addEventListener("message",
|
|
149
|
-
|
|
148
|
+
window.addEventListener("message", f), t.onclick = (d) => {
|
|
149
|
+
d.stopPropagation(), s = !s, s ? (e.style.display = "block", l.style.display = "block", requestAnimationFrame(() => {
|
|
150
150
|
e.style.opacity = "1", e.style.transform = "scale(1) translateY(0)";
|
|
151
|
-
})) :
|
|
152
|
-
}, document.addEventListener("click", (
|
|
153
|
-
const o =
|
|
154
|
-
o &&
|
|
151
|
+
})) : h();
|
|
152
|
+
}, document.addEventListener("click", (d) => {
|
|
153
|
+
const o = d.target;
|
|
154
|
+
o && s && !e.contains(o) && o !== t && h();
|
|
155
155
|
});
|
|
156
|
-
const
|
|
157
|
-
close:
|
|
156
|
+
const u = {
|
|
157
|
+
close: h,
|
|
158
158
|
open: () => {
|
|
159
|
-
|
|
159
|
+
s || t.click();
|
|
160
160
|
}
|
|
161
161
|
};
|
|
162
|
-
return window.CopilotChat = window.CopilotChat || {}, window.CopilotChat.close =
|
|
162
|
+
return window.CopilotChat = window.CopilotChat || {}, window.CopilotChat.close = u.close, window.CopilotChat.open = u.open, window.CopilotChat.controls = u, u;
|
|
163
163
|
};
|
|
164
|
-
async function E(
|
|
164
|
+
async function E(g = {}) {
|
|
165
165
|
if (typeof window > "u" || typeof document > "u")
|
|
166
166
|
return null;
|
|
167
|
-
const
|
|
168
|
-
if (!d)
|
|
169
|
-
return console.error(
|
|
170
|
-
"[CopilotChat] Missing token (provide via loadCopilotChatWidget({ token }) or window.CopilotChatConfig.token)."
|
|
171
|
-
), null;
|
|
172
|
-
const g = h.baseUrl || u.baseUrl || C, c = `${g.replace(/\/$/, "")}/api/chat-widget/config?token=${encodeURIComponent(
|
|
173
|
-
d
|
|
174
|
-
)}`;
|
|
167
|
+
const b = window.CopilotChatConfig || {}, c = g.baseUrl || b.baseUrl || y, m = `${c.replace(/\/$/, "")}/api/chat-widget/config`;
|
|
175
168
|
try {
|
|
176
|
-
const n = await fetch(
|
|
169
|
+
const n = await fetch(m, {
|
|
177
170
|
credentials: "omit",
|
|
178
171
|
mode: "cors"
|
|
179
172
|
});
|
|
180
173
|
if (!n.ok)
|
|
181
174
|
throw new Error(`Server responded with ${n.status}`);
|
|
182
|
-
const
|
|
183
|
-
if (!
|
|
175
|
+
const a = await n.json();
|
|
176
|
+
if (!a?.iframeUrl || !a?.launcherIcon)
|
|
184
177
|
throw new Error("Received incomplete widget configuration from server.");
|
|
185
|
-
return window.CopilotChat = window.CopilotChat || {}, window.CopilotChat.
|
|
186
|
-
iframeUrl:
|
|
187
|
-
launcherIcon:
|
|
178
|
+
return window.CopilotChat = window.CopilotChat || {}, window.CopilotChat.baseUrl = c, C({
|
|
179
|
+
iframeUrl: a.iframeUrl,
|
|
180
|
+
launcherIcon: a.launcherIcon
|
|
188
181
|
});
|
|
189
182
|
} catch (n) {
|
|
190
183
|
return console.error(
|
package/package.json
CHANGED
package/src/index.d.ts
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
export interface CopilotChatOptions {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
}
|
|
1
|
+
export interface CopilotChatOptions {
|
|
2
|
+
autoload?: boolean;
|
|
3
|
+
baseUrl?: string;
|
|
4
|
+
}
|
|
6
5
|
|
|
7
6
|
export function loadCopilotChatWidget(options: CopilotChatOptions): unknown;
|
|
8
7
|
export default loadCopilotChatWidget;
|
package/src/index.js
CHANGED
|
@@ -265,30 +265,17 @@ const buildWidget = ({ iframeUrl, launcherIcon }) => {
|
|
|
265
265
|
return controls;
|
|
266
266
|
};
|
|
267
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
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
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 ||
|
|
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
|
+
|
|
275
|
+
const baseUrl =
|
|
276
|
+
options.baseUrl ||
|
|
277
|
+
globalConfig.baseUrl ||
|
|
278
|
+
BUILD_BASE_URL ||
|
|
292
279
|
(typeof window !== "undefined" && window.location?.origin) ||
|
|
293
280
|
null;
|
|
294
281
|
|
|
@@ -299,9 +286,7 @@ export async function loadCopilotChatWidget(options = {}) {
|
|
|
299
286
|
return null;
|
|
300
287
|
}
|
|
301
288
|
|
|
302
|
-
const url = `${baseUrl.replace(/\/$/, "")}/api/chat-widget/config
|
|
303
|
-
token
|
|
304
|
-
)}`;
|
|
289
|
+
const url = `${baseUrl.replace(/\/$/, "")}/api/chat-widget/config`;
|
|
305
290
|
|
|
306
291
|
try {
|
|
307
292
|
const response = await fetch(url, {
|
|
@@ -319,8 +304,7 @@ export async function loadCopilotChatWidget(options = {}) {
|
|
|
319
304
|
}
|
|
320
305
|
|
|
321
306
|
window.CopilotChat = window.CopilotChat || {};
|
|
322
|
-
window.CopilotChat.
|
|
323
|
-
window.CopilotChat.baseUrl = baseUrl;
|
|
307
|
+
window.CopilotChat.baseUrl = baseUrl;
|
|
324
308
|
|
|
325
309
|
return buildWidget({
|
|
326
310
|
iframeUrl: remoteConfig.iframeUrl,
|
package/src/widget-runtime.js
CHANGED
|
@@ -11,22 +11,7 @@
|
|
|
11
11
|
const IFRAME_SIZE = 720;
|
|
12
12
|
const embeddingScript = document.currentScript;
|
|
13
13
|
|
|
14
|
-
const
|
|
15
|
-
if (!scriptEl?.src) return {};
|
|
16
|
-
try {
|
|
17
|
-
const url = new URL(scriptEl.src, window.location.href);
|
|
18
|
-
const params = {};
|
|
19
|
-
url.searchParams.forEach((value, key) => {
|
|
20
|
-
params[key] = value;
|
|
21
|
-
});
|
|
22
|
-
return params;
|
|
23
|
-
} catch (error) {
|
|
24
|
-
console.warn("[CopilotChat] Failed to parse script query params:", error);
|
|
25
|
-
return {};
|
|
26
|
-
}
|
|
27
|
-
};
|
|
28
|
-
|
|
29
|
-
const ready = (fn) => {
|
|
14
|
+
const ready = (fn) => {
|
|
30
15
|
if (document.readyState === "complete" || document.readyState === "interactive") {
|
|
31
16
|
setTimeout(fn, 0);
|
|
32
17
|
} else {
|
|
@@ -322,75 +307,35 @@
|
|
|
322
307
|
console.error(`[CopilotChat] ${message}`);
|
|
323
308
|
};
|
|
324
309
|
|
|
325
|
-
const shouldAutoBootstrapFromScript = () => {
|
|
326
|
-
const scriptEl = resolveEmbeddingScript();
|
|
327
|
-
if (!scriptEl) return false;
|
|
328
|
-
const
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
const
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
if (fromConfig) return fromConfig;
|
|
344
|
-
|
|
345
|
-
try {
|
|
346
|
-
const stored = window.localStorage.getItem("copilotChatToken");
|
|
347
|
-
if (stored) return stored;
|
|
348
|
-
} catch (error) {
|
|
349
|
-
// ignore storage errors
|
|
350
|
-
}
|
|
351
|
-
|
|
352
|
-
if (typeof window !== "undefined" && typeof window.prompt === "function") {
|
|
353
|
-
const entered = window.prompt("Enter your Copilot Chat token:");
|
|
354
|
-
if (entered) {
|
|
355
|
-
try {
|
|
356
|
-
window.localStorage.setItem("copilotChatToken", entered);
|
|
357
|
-
} catch (error) {
|
|
358
|
-
// ignore storage errors
|
|
359
|
-
}
|
|
360
|
-
return entered;
|
|
361
|
-
}
|
|
362
|
-
}
|
|
363
|
-
|
|
364
|
-
return null;
|
|
365
|
-
};
|
|
366
|
-
|
|
367
|
-
const token = resolveToken();
|
|
368
|
-
|
|
369
|
-
if (!token) {
|
|
370
|
-
handleError("Missing token (provide via init config, window.CopilotChatConfig.token, or data-token attribute).");
|
|
371
|
-
return null;
|
|
372
|
-
}
|
|
373
|
-
|
|
374
|
-
const baseUrl =
|
|
375
|
-
config.baseUrl ||
|
|
376
|
-
globalConfig.baseUrl ||
|
|
377
|
-
datasetConfig.baseUrl ||
|
|
378
|
-
queryConfig.baseUrl ||
|
|
379
|
-
BUILD_BASE_URL ||
|
|
380
|
-
inferBaseUrlFromScript(scriptEl) ||
|
|
381
|
-
(typeof window !== "undefined" && window.location?.origin) ||
|
|
382
|
-
null;
|
|
310
|
+
const shouldAutoBootstrapFromScript = () => {
|
|
311
|
+
const scriptEl = resolveEmbeddingScript();
|
|
312
|
+
if (!scriptEl) return false;
|
|
313
|
+
const dataset = scriptEl.dataset || {};
|
|
314
|
+
return dataset.autoload !== "false";
|
|
315
|
+
};
|
|
316
|
+
|
|
317
|
+
const initCopilotChatWidget = async (config = {}) => {
|
|
318
|
+
const scriptEl = config.scriptEl || resolveEmbeddingScript();
|
|
319
|
+
const globalConfig = window.CopilotChatConfig || {};
|
|
320
|
+
|
|
321
|
+
const baseUrl =
|
|
322
|
+
config.baseUrl ||
|
|
323
|
+
globalConfig.baseUrl ||
|
|
324
|
+
BUILD_BASE_URL ||
|
|
325
|
+
inferBaseUrlFromScript(scriptEl) ||
|
|
326
|
+
(typeof window !== "undefined" && window.location?.origin) ||
|
|
327
|
+
null;
|
|
383
328
|
|
|
384
329
|
if (!baseUrl) {
|
|
385
330
|
handleError("Unable to resolve base URL from embedding script or window.location.");
|
|
386
331
|
return null;
|
|
387
332
|
}
|
|
388
333
|
|
|
389
|
-
try {
|
|
390
|
-
const response = await fetch(`${baseUrl}/api/chat-widget/config
|
|
391
|
-
credentials: "omit",
|
|
392
|
-
mode: "cors",
|
|
393
|
-
});
|
|
334
|
+
try {
|
|
335
|
+
const response = await fetch(`${baseUrl}/api/chat-widget/config`, {
|
|
336
|
+
credentials: "omit",
|
|
337
|
+
mode: "cors",
|
|
338
|
+
});
|
|
394
339
|
|
|
395
340
|
if (!response.ok) {
|
|
396
341
|
throw new Error(`Server responded with ${response.status}`);
|