copilot-chat-widget 0.1.24 → 0.1.25
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 +27 -16
- package/dist/chat-widget.min.js +3 -3
- package/dist/index.cjs +2 -2
- package/dist/index.mjs +53 -46
- package/package.json +1 -1
- package/src/index.d.ts +5 -3
- package/src/index.js +28 -6
- package/src/widget-runtime.js +89 -34
package/README.md
CHANGED
|
@@ -13,10 +13,13 @@ yarn add copilot-chat-widget
|
|
|
13
13
|
```js
|
|
14
14
|
import { loadCopilotChatWidget } from "copilot-chat-widget";
|
|
15
15
|
|
|
16
|
-
loadCopilotChatWidget({
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
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`.
|
|
20
23
|
|
|
21
24
|
### React/Next.js example
|
|
22
25
|
```jsx
|
|
@@ -24,10 +27,12 @@ import { useEffect } from "react";
|
|
|
24
27
|
import { loadCopilotChatWidget } from "copilot-chat-widget";
|
|
25
28
|
|
|
26
29
|
export default function Page() {
|
|
27
|
-
useEffect(() => {
|
|
28
|
-
loadCopilotChatWidget({
|
|
29
|
-
|
|
30
|
-
|
|
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
|
+
}, []);
|
|
31
36
|
|
|
32
37
|
return <main>Your page content</main>;
|
|
33
38
|
}
|
|
@@ -35,14 +40,20 @@ export default function Page() {
|
|
|
35
40
|
|
|
36
41
|
## Usage (script tag)
|
|
37
42
|
```html
|
|
38
|
-
<script
|
|
39
|
-
src="https://cdn.example.com/chat-widget.min.js"
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
- `
|
|
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.
|
|
46
57
|
|
|
47
58
|
Runtime controls (after script loads):
|
|
48
59
|
```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 T="http://localhost:3000",b=64,y=720,x=document.currentScript,k=t=>{if(!t?.src)return{};try{const s=new URL(t.src,window.location.href),n={};return s.searchParams.forEach((l,c)=>{n[c]=l}),n}catch(s){return console.warn("[CopilotChat] Failed to parse script query params:",s),{}}},I=t=>{document.readyState==="complete"||document.readyState==="interactive"?setTimeout(t,0):document.addEventListener("DOMContentLoaded",t)},v=()=>x||Array.from(document.querySelectorAll("script")).reverse().find(n=>n.dataset?.token||n.src&&n.src.includes("chat-widget"))||null,U=({iframeUrl:t,launcherIcon:s})=>{const n=document.querySelector("[data-copilot-widget-root]");n&&n.remove();const l=w=>{const a=document.querySelector("[data-copilot-checkout-toast]");a&&a.remove();const h=document.createElement("div");h.setAttribute("data-copilot-checkout-toast","true"),h.innerText=w,Object.assign(h.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(h),setTimeout(()=>{h.remove()},4500)},c=document.createElement("div");c.setAttribute("data-copilot-widget-root","true");const C=c.attachShadow({mode:"open"});document.body.appendChild(c);const e=document.createElement("button");e.type="button",e.setAttribute("aria-label","Open Copilot chat"),e.innerHTML=`
|
|
2
2
|
<img
|
|
3
|
-
src="${
|
|
3
|
+
src="${s}"
|
|
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(e.style,{position:"fixed",bottom:"24px",right:"24px",width:`${b}px`,height:`${b}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"}),e.onmouseover=()=>{e.style.transform="scale(1.12)",e.style.boxShadow="0 10px 25px rgba(0,0,0,0.3)"},e.onmouseout=()=>{e.style.transform="scale(1)",e.style.boxShadow="0 6px 14px rgba(0,0,0,0.25)"};const i=document.createElement("div");i.setAttribute("data-copilot-widget-root","true"),Object.assign(i.style,{display:"none",position:"fixed",bottom:`${b+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 o=document.createElement("div"),r=document.createElement("div"),m=document.createElement("div");Object.assign(o.style,{position:"absolute",bottom:"-14px",right:"28px",width:"30px",height:"20px",pointerEvents:"none",display:"none",zIndex:"1"}),Object.assign(r.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(m.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"}),o.appendChild(r),o.appendChild(m);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"}),C.appendChild(p);const d=document.createElement("iframe");d.src=t,d.title="Copilot chat widget",d.allow="clipboard-read; clipboard-write; microphone; camera; display-capture",d.setAttribute("scrolling","no"),Object.assign(d.style,{width:"100%",height:"100%",border:"none",display:"block",background:"transparent",overflow:"hidden"}),C.appendChild(p),p.appendChild(d),i.appendChild(o),i.appendChild(p),document.body.appendChild(e),document.body.appendChild(i);let u=!1;const f=()=>{u&&(u=!1,i.style.opacity="0",i.style.transform="scale(0.8) translateY(20px)",o.style.display="none",setTimeout(()=>{i.style.display="none"},250),e.style.transform="scale(1)")},O=w=>{const{data:a,source:h}=w||{};if(a?.type){if(a.type==="CART_CHECKOUT"&&h===d.contentWindow){console.log("[CopilotChat] Received checkout payload from widget:",a),l("Checkout message received from chat widget. Check console for payload.");return}if(a.type==="WIDGET_READY"&&h===d.contentWindow){d.contentWindow.postMessage({type:"INIT_WIDGET"},"*");return}a.type==="CHAT_CLOSED"&&f()}};e.onclick=w=>{w.stopPropagation(),u=!u,u?(i.style.display="block",o.style.display="block",requestAnimationFrame(()=>{i.style.opacity="1",i.style.transform="scale(1) translateY(0)"})):f()},window.addEventListener("message",O),document.addEventListener("click",w=>{const a=w.target;a&&u&&!i.contains(a)&&a!==e&&f()});const g={close:f,open:()=>{u||e.click()}};return window.CopilotChat=window.CopilotChat||{},window.CopilotChat.close=g.close,window.CopilotChat.open=g.open,window.CopilotChat.controls=g,g},E=t=>{console.error(`[CopilotChat] ${t}`)},A=()=>{const t=v();if(!t)return!1;const s=k(t),n=t.dataset||{},l=n.token||s.token,c=typeof window<"u"&&window.CopilotChatConfig&&window.CopilotChatConfig.token;return(l||c)&&n.autoload!=="false"},S=async(t={})=>{const s=t.scriptEl||v(),n=window.CopilotChatConfig||{},l=s?.dataset||{},c=k(s),e=(()=>{const o=t.token||n.token||l.token||c.token;if(o)return o;try{const r=window.localStorage.getItem("copilotChatToken");if(r)return r}catch{}if(typeof window<"u"&&typeof window.prompt=="function"){const r=window.prompt("Enter your Copilot Chat token:");if(r){try{window.localStorage.setItem("copilotChatToken",r)}catch{}return r}}return null})();if(!e)return E("Missing token (provide via init config, window.CopilotChatConfig.token, or data-token attribute)."),null;const i=t.baseUrl||n.baseUrl||l.baseUrl||c.baseUrl||T;try{const o=await fetch(`${i}/api/chat-widget/config?token=${encodeURIComponent(e)}`,{credentials:"omit",mode:"cors"});if(!o.ok)throw new Error(`Server responded with ${o.status}`);const r=await o.json();if(!r?.iframeUrl||!r?.launcherIcon)throw new Error("Received incomplete widget configuration from server.");return window.CopilotChat=window.CopilotChat||{},window.CopilotChat.init=(p={})=>{const d={iframeUrl:p.iframeUrl||r.iframeUrl,launcherIcon:p.launcherIcon||r.launcherIcon};return U(d)},window.CopilotChat.init(t)}catch(o){return E(o instanceof Error?o.message:"Unknown error during widget bootstrap."),null}};A()&&I(()=>{S()}),window.CopilotChat=window.CopilotChat||{},window.CopilotChat.load=S})()})();
|
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 k="http://localhost:3000",w=64,C=720,E=({iframeUrl:h,launcherIcon:u})=>{const d=document.querySelector("[data-copilot-widget-root]");d&&d.remove();const g=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)},c=document.createElement("div");c.setAttribute("data-copilot-widget-root","true");const n=c.attachShadow({mode:"open"});document.body.appendChild(c);const t=document.createElement("button");t.type="button",t.setAttribute("aria-label","Open Copilot chat"),t.innerHTML=`
|
|
2
2
|
<img
|
|
3
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:`${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:`${C}px`,maxWidth:"calc(100vw - 48px)",height:`${Math.min(C,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"}),n.appendChild(p);const i=document.createElement("iframe");i.src=h,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"}),n.appendChild(p),p.appendChild(i),e.appendChild(l),e.appendChild(p),document.body.appendChild(t),document.body.appendChild(e);let a=!1;const m=()=>{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)")},v=s=>{const{data:o,source:r}=s||{};if(o?.type){if(o.type==="CART_CHECKOUT"&&r===i.contentWindow){console.log("[CopilotChat] Received checkout payload from widget:",o),g("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"&&m()}};window.addEventListener("message",v),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)"})):m()},document.addEventListener("click",s=>{const o=s.target;o&&a&&!e.contains(o)&&o!==t&&m()});const b={close:m,open:()=>{a||t.click()}};return window.CopilotChat=window.CopilotChat||{},window.CopilotChat.close=b.close,window.CopilotChat.open=b.open,window.CopilotChat.controls=b,b};async function y(h={}){if(typeof window>"u"||typeof document>"u")return null;const u=window.CopilotChatConfig||{},d=h.token||u.token||typeof window<"u"&&window.localStorage?.getItem("copilotChatToken")||null;if(!d)return console.error("[CopilotChat] Missing token (provide via loadCopilotChatWidget({ token }) or window.CopilotChatConfig.token)."),null;const g=h.baseUrl||u.baseUrl||k,c=`${g.replace(/\/$/,"")}/api/chat-widget/config?token=${encodeURIComponent(d)}`;try{const n=await fetch(c,{credentials:"omit",mode:"cors"});if(!n.ok)throw new Error(`Server responded with ${n.status}`);const t=await n.json();if(!t?.iframeUrl||!t?.launcherIcon)throw new Error("Received incomplete widget configuration from server.");return window.CopilotChat=window.CopilotChat||{},window.CopilotChat.token=d,window.CopilotChat.baseUrl=g,E({iframeUrl:t.iframeUrl,launcherIcon:t.launcherIcon})}catch(n){return console.error("[CopilotChat] Error during widget bootstrap:",n instanceof Error?n.message:n),null}}exports.default=y;exports.loadCopilotChatWidget=y;
|
package/dist/index.mjs
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
const
|
|
2
|
-
const
|
|
3
|
-
const
|
|
4
|
-
|
|
5
|
-
const
|
|
1
|
+
const C = "http://localhost:3000";
|
|
2
|
+
const y = ({ iframeUrl: h, launcherIcon: u }) => {
|
|
3
|
+
const d = document.querySelector("[data-copilot-widget-root]");
|
|
4
|
+
d && d.remove();
|
|
5
|
+
const g = (s) => {
|
|
6
6
|
const o = document.querySelector("[data-copilot-checkout-toast]");
|
|
7
7
|
o && o.remove();
|
|
8
8
|
const r = document.createElement("div");
|
|
@@ -25,10 +25,10 @@ const C = ({ iframeUrl: m, 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
|
+
}, c = document.createElement("div");
|
|
29
|
+
c.setAttribute("data-copilot-widget-root", "true");
|
|
30
|
+
const n = c.attachShadow({ mode: "open" });
|
|
31
|
+
document.body.appendChild(c);
|
|
32
32
|
const t = document.createElement("button");
|
|
33
33
|
t.type = "button", t.setAttribute("aria-label", "Open Copilot chat"), t.innerHTML = `
|
|
34
34
|
<img
|
|
@@ -70,8 +70,8 @@ const C = ({ iframeUrl: m, 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
|
|
74
|
-
Object.assign(
|
|
73
|
+
const l = document.createElement("div"), b = document.createElement("div"), f = document.createElement("div");
|
|
74
|
+
Object.assign(l.style, {
|
|
75
75
|
position: "absolute",
|
|
76
76
|
bottom: "-14px",
|
|
77
77
|
right: "28px",
|
|
@@ -80,7 +80,7 @@ const C = ({ iframeUrl: m, launcherIcon: u }) => {
|
|
|
80
80
|
pointerEvents: "none",
|
|
81
81
|
display: "none",
|
|
82
82
|
zIndex: "1"
|
|
83
|
-
}), Object.assign(
|
|
83
|
+
}), Object.assign(b.style, {
|
|
84
84
|
position: "absolute",
|
|
85
85
|
bottom: "0",
|
|
86
86
|
left: "0",
|
|
@@ -104,9 +104,9 @@ const C = ({ iframeUrl: m, 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
|
-
}),
|
|
108
|
-
const
|
|
109
|
-
Object.assign(
|
|
107
|
+
}), l.appendChild(b), l.appendChild(f);
|
|
108
|
+
const p = document.createElement("div");
|
|
109
|
+
Object.assign(p.style, {
|
|
110
110
|
width: "720px",
|
|
111
111
|
maxWidth: "calc(100vw - 48px)",
|
|
112
112
|
height: `${Math.min(720, Math.max(320, window.innerHeight - 140))}px`,
|
|
@@ -116,73 +116,80 @@ const C = ({ iframeUrl: m, 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
|
-
}),
|
|
120
|
-
const
|
|
121
|
-
|
|
119
|
+
}), n.appendChild(p);
|
|
120
|
+
const i = document.createElement("iframe");
|
|
121
|
+
i.src = h, 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
|
-
}),
|
|
128
|
+
}), n.appendChild(p), p.appendChild(i), e.appendChild(l), e.appendChild(p), document.body.appendChild(t), document.body.appendChild(e);
|
|
129
129
|
let a = !1;
|
|
130
|
-
const
|
|
131
|
-
a && (a = !1, e.style.opacity = "0", e.style.transform = "scale(0.8) translateY(20px)",
|
|
130
|
+
const m = () => {
|
|
131
|
+
a && (a = !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
|
-
},
|
|
134
|
+
}, x = (s) => {
|
|
135
135
|
const { data: o, source: r } = s || {};
|
|
136
136
|
if (o?.type) {
|
|
137
|
-
if (o.type === "CART_CHECKOUT" && r ===
|
|
138
|
-
console.log("[CopilotChat] Received checkout payload from widget:", o),
|
|
137
|
+
if (o.type === "CART_CHECKOUT" && r === i.contentWindow) {
|
|
138
|
+
console.log("[CopilotChat] Received checkout payload from widget:", o), g("Checkout message received from chat widget. Check console for payload.");
|
|
139
139
|
return;
|
|
140
140
|
}
|
|
141
|
-
if (o.type === "WIDGET_READY" && r ===
|
|
142
|
-
|
|
141
|
+
if (o.type === "WIDGET_READY" && r === i.contentWindow) {
|
|
142
|
+
i.contentWindow.postMessage({ type: "INIT_WIDGET" }, "*");
|
|
143
143
|
return;
|
|
144
144
|
}
|
|
145
|
-
o.type === "CHAT_CLOSED" &&
|
|
145
|
+
o.type === "CHAT_CLOSED" && m();
|
|
146
146
|
}
|
|
147
147
|
};
|
|
148
|
-
window.addEventListener("message",
|
|
149
|
-
s.stopPropagation(), a = !a, a ? (e.style.display = "block",
|
|
148
|
+
window.addEventListener("message", x), t.onclick = (s) => {
|
|
149
|
+
s.stopPropagation(), a = !a, a ? (e.style.display = "block", l.style.display = "block", requestAnimationFrame(() => {
|
|
150
150
|
e.style.opacity = "1", e.style.transform = "scale(1) translateY(0)";
|
|
151
|
-
})
|
|
151
|
+
})) : m();
|
|
152
152
|
}, document.addEventListener("click", (s) => {
|
|
153
153
|
const o = s.target;
|
|
154
|
-
o && a && !e.contains(o) && o !== t &&
|
|
154
|
+
o && a && !e.contains(o) && o !== t && m();
|
|
155
155
|
});
|
|
156
|
-
const
|
|
157
|
-
close:
|
|
156
|
+
const w = {
|
|
157
|
+
close: m,
|
|
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 = w.close, window.CopilotChat.open = w.open, window.CopilotChat.controls = w, w;
|
|
163
163
|
};
|
|
164
|
-
async function E() {
|
|
164
|
+
async function E(h = {}) {
|
|
165
165
|
if (typeof window > "u" || typeof document > "u")
|
|
166
166
|
return null;
|
|
167
|
-
const u =
|
|
167
|
+
const u = window.CopilotChatConfig || {}, d = h.token || u.token || typeof window < "u" && window.localStorage?.getItem("copilotChatToken") || null;
|
|
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
|
+
)}`;
|
|
168
175
|
try {
|
|
169
|
-
const
|
|
176
|
+
const n = await fetch(c, {
|
|
170
177
|
credentials: "omit",
|
|
171
178
|
mode: "cors"
|
|
172
179
|
});
|
|
173
|
-
if (!
|
|
174
|
-
throw new Error(`Server responded with ${
|
|
175
|
-
const
|
|
176
|
-
if (!
|
|
180
|
+
if (!n.ok)
|
|
181
|
+
throw new Error(`Server responded with ${n.status}`);
|
|
182
|
+
const t = await n.json();
|
|
183
|
+
if (!t?.iframeUrl || !t?.launcherIcon)
|
|
177
184
|
throw new Error("Received incomplete widget configuration from server.");
|
|
178
|
-
return
|
|
179
|
-
iframeUrl:
|
|
180
|
-
launcherIcon:
|
|
185
|
+
return window.CopilotChat = window.CopilotChat || {}, window.CopilotChat.token = d, window.CopilotChat.baseUrl = g, y({
|
|
186
|
+
iframeUrl: t.iframeUrl,
|
|
187
|
+
launcherIcon: t.launcherIcon
|
|
181
188
|
});
|
|
182
|
-
} catch (
|
|
189
|
+
} catch (n) {
|
|
183
190
|
return console.error(
|
|
184
191
|
"[CopilotChat] Error during widget bootstrap:",
|
|
185
|
-
|
|
192
|
+
n instanceof Error ? n.message : n
|
|
186
193
|
), null;
|
|
187
194
|
}
|
|
188
195
|
}
|
package/package.json
CHANGED
package/src/index.d.ts
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
|
-
export interface CopilotChatOptions {
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
export interface CopilotChatOptions {
|
|
2
|
+
token: string;
|
|
3
|
+
autoload?: boolean;
|
|
4
|
+
baseUrl?: string;
|
|
5
|
+
}
|
|
4
6
|
|
|
5
7
|
export function loadCopilotChatWidget(options: CopilotChatOptions): unknown;
|
|
6
8
|
export default loadCopilotChatWidget;
|
package/src/index.js
CHANGED
|
@@ -235,9 +235,6 @@ const buildWidget = ({ iframeUrl, launcherIcon }) => {
|
|
|
235
235
|
container.style.opacity = "1";
|
|
236
236
|
container.style.transform = "scale(1) translateY(0)";
|
|
237
237
|
});
|
|
238
|
-
if (iframe.contentWindow) {
|
|
239
|
-
iframe.contentWindow.postMessage({ type: "CHAT_OPENED" }, "*");
|
|
240
|
-
}
|
|
241
238
|
} else {
|
|
242
239
|
closeChat();
|
|
243
240
|
}
|
|
@@ -268,22 +265,43 @@ const buildWidget = ({ iframeUrl, launcherIcon }) => {
|
|
|
268
265
|
return controls;
|
|
269
266
|
};
|
|
270
267
|
|
|
271
|
-
export async function loadCopilotChatWidget() {
|
|
268
|
+
export async function loadCopilotChatWidget(options = {}) {
|
|
272
269
|
if (typeof window === "undefined" || typeof document === "undefined") {
|
|
273
270
|
return null;
|
|
274
271
|
}
|
|
275
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
|
+
|
|
276
288
|
const baseUrl =
|
|
289
|
+
options.baseUrl ||
|
|
290
|
+
globalConfig.baseUrl ||
|
|
277
291
|
BUILD_BASE_URL ||
|
|
278
292
|
(typeof window !== "undefined" && window.location?.origin) ||
|
|
279
293
|
null;
|
|
280
294
|
|
|
281
295
|
if (!baseUrl) {
|
|
282
|
-
console.error(
|
|
296
|
+
console.error(
|
|
297
|
+
"[CopilotChat] Missing baseUrl (set via loadCopilotChatWidget({ baseUrl }), window.CopilotChatConfig.baseUrl, or WIDGET_BASE_URL)."
|
|
298
|
+
);
|
|
283
299
|
return null;
|
|
284
300
|
}
|
|
285
301
|
|
|
286
|
-
const url = `${baseUrl.replace(/\/$/, "")}/api/chat-widget/config
|
|
302
|
+
const url = `${baseUrl.replace(/\/$/, "")}/api/chat-widget/config?token=${encodeURIComponent(
|
|
303
|
+
token
|
|
304
|
+
)}`;
|
|
287
305
|
|
|
288
306
|
try {
|
|
289
307
|
const response = await fetch(url, {
|
|
@@ -300,6 +318,10 @@ export async function loadCopilotChatWidget() {
|
|
|
300
318
|
throw new Error("Received incomplete widget configuration from server.");
|
|
301
319
|
}
|
|
302
320
|
|
|
321
|
+
window.CopilotChat = window.CopilotChat || {};
|
|
322
|
+
window.CopilotChat.token = token;
|
|
323
|
+
window.CopilotChat.baseUrl = baseUrl;
|
|
324
|
+
|
|
303
325
|
return buildWidget({
|
|
304
326
|
iframeUrl: remoteConfig.iframeUrl,
|
|
305
327
|
launcherIcon: remoteConfig.launcherIcon,
|
package/src/widget-runtime.js
CHANGED
|
@@ -11,6 +11,21 @@
|
|
|
11
11
|
const IFRAME_SIZE = 720;
|
|
12
12
|
const embeddingScript = document.currentScript;
|
|
13
13
|
|
|
14
|
+
const readQueryConfig = (scriptEl) => {
|
|
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
|
+
|
|
14
29
|
const ready = (fn) => {
|
|
15
30
|
if (document.readyState === "complete" || document.readyState === "interactive") {
|
|
16
31
|
setTimeout(fn, 0);
|
|
@@ -30,15 +45,15 @@
|
|
|
30
45
|
}
|
|
31
46
|
};
|
|
32
47
|
|
|
33
|
-
const resolveEmbeddingScript = () => {
|
|
34
|
-
if (embeddingScript) {
|
|
35
|
-
return embeddingScript;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
const scripts = Array.from(document.querySelectorAll("script"));
|
|
39
|
-
const candidate = scripts
|
|
40
|
-
.reverse()
|
|
41
|
-
.find((script) => script.src && script.src.includes("chat-widget"));
|
|
48
|
+
const resolveEmbeddingScript = () => {
|
|
49
|
+
if (embeddingScript) {
|
|
50
|
+
return embeddingScript;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
const scripts = Array.from(document.querySelectorAll("script"));
|
|
54
|
+
const candidate = scripts
|
|
55
|
+
.reverse()
|
|
56
|
+
.find((script) => script.dataset?.token || (script.src && script.src.includes("chat-widget")));
|
|
42
57
|
|
|
43
58
|
return candidate || null;
|
|
44
59
|
};
|
|
@@ -261,23 +276,20 @@
|
|
|
261
276
|
}
|
|
262
277
|
};
|
|
263
278
|
|
|
264
|
-
btn.onclick = (event) => {
|
|
265
|
-
event.stopPropagation();
|
|
266
|
-
isOpen = !isOpen;
|
|
267
|
-
if (isOpen) {
|
|
268
|
-
container.style.display = "block";
|
|
269
|
-
arrow.style.display = "block";
|
|
270
|
-
requestAnimationFrame(() => {
|
|
271
|
-
container.style.opacity = "1";
|
|
272
|
-
container.style.transform = "scale(1) translateY(0)";
|
|
273
|
-
});
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
closeChat();
|
|
279
|
-
}
|
|
280
|
-
};
|
|
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
|
+
};
|
|
281
293
|
|
|
282
294
|
window.addEventListener("message", handleWidgetMessage);
|
|
283
295
|
|
|
@@ -313,16 +325,59 @@
|
|
|
313
325
|
const shouldAutoBootstrapFromScript = () => {
|
|
314
326
|
const scriptEl = resolveEmbeddingScript();
|
|
315
327
|
if (!scriptEl) return false;
|
|
328
|
+
const queryConfig = readQueryConfig(scriptEl);
|
|
316
329
|
const dataset = scriptEl.dataset || {};
|
|
317
|
-
|
|
330
|
+
const hasTokenHint = dataset.token || queryConfig.token;
|
|
331
|
+
const hasGlobalToken = typeof window !== "undefined" && window.CopilotChatConfig && window.CopilotChatConfig.token;
|
|
332
|
+
return (hasTokenHint || hasGlobalToken) && dataset.autoload !== "false";
|
|
318
333
|
};
|
|
319
334
|
|
|
320
|
-
const initCopilotChatWidget = async (config = {}) => {
|
|
321
|
-
const scriptEl = config.scriptEl || resolveEmbeddingScript();
|
|
322
|
-
|
|
323
|
-
const
|
|
324
|
-
|
|
325
|
-
|
|
335
|
+
const initCopilotChatWidget = async (config = {}) => {
|
|
336
|
+
const scriptEl = config.scriptEl || resolveEmbeddingScript();
|
|
337
|
+
const globalConfig = window.CopilotChatConfig || {};
|
|
338
|
+
const datasetConfig = scriptEl?.dataset || {};
|
|
339
|
+
const queryConfig = readQueryConfig(scriptEl);
|
|
340
|
+
|
|
341
|
+
const resolveToken = () => {
|
|
342
|
+
const fromConfig = config.token || globalConfig.token || datasetConfig.token || queryConfig.token;
|
|
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) ||
|
|
326
381
|
(typeof window !== "undefined" && window.location?.origin) ||
|
|
327
382
|
null;
|
|
328
383
|
|
|
@@ -332,7 +387,7 @@
|
|
|
332
387
|
}
|
|
333
388
|
|
|
334
389
|
try {
|
|
335
|
-
const response = await fetch(`${baseUrl}/api/chat-widget/config`, {
|
|
390
|
+
const response = await fetch(`${baseUrl}/api/chat-widget/config?token=${encodeURIComponent(token)}`, {
|
|
336
391
|
credentials: "omit",
|
|
337
392
|
mode: "cors",
|
|
338
393
|
});
|