copilot-chat-widget 0.1.1 → 0.1.3
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 +56 -68
- package/dist/chat-widget.min.js +3 -3
- package/dist/index.cjs +1 -7
- package/dist/index.mjs +18 -198
- package/package.json +2 -2
- package/src/index.d.ts +7 -0
- package/src/index.js +32 -371
- package/src/widget-runtime.js +345 -0
- package/src/standalone.js +0 -4
package/README.md
CHANGED
|
@@ -8,74 +8,62 @@ Widget chat Copilot nay co the nhung bang 2 cach:
|
|
|
8
8
|
## Cai dat
|
|
9
9
|
|
|
10
10
|
```bash
|
|
11
|
-
npm install copilot-chat-widget
|
|
12
|
-
# hoac
|
|
13
|
-
yarn add copilot-chat-widget
|
|
14
|
-
```
|
|
15
|
-
|
|
16
|
-
## Su dung voi NPM
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
##
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
```
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
## API cau hinh
|
|
68
|
-
|
|
69
|
-
- `token` (string, bat buoc): ma token widget.
|
|
70
|
-
- `force` (boolean): cho phep khoi dong lai widget neu da co instance truoc do.
|
|
71
|
-
|
|
72
|
-
Khi da khoi dong, co the goi:
|
|
73
|
-
|
|
74
|
-
```js
|
|
75
|
-
window.CopilotChat.open(); // mo widget
|
|
76
|
-
window.CopilotChat.close(); // dong widget
|
|
77
|
-
window.CopilotChat.init(); // khoi tao lai (neu can) voi cau hinh mac dinh
|
|
78
|
-
```
|
|
11
|
+
npm install copilot-chat-widget
|
|
12
|
+
# hoac
|
|
13
|
+
yarn add copilot-chat-widget
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
## Su dung voi NPM (import)
|
|
17
|
+
|
|
18
|
+
```js
|
|
19
|
+
import { loadCopilotChatWidget } from "copilot-chat-widget";
|
|
20
|
+
|
|
21
|
+
loadCopilotChatWidget({ token: "YOUR_WIDGET_TOKEN" });
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
Hàm này se gắn script `chat-widget.min.js` (IIFE) vào trang, đọc `token` từ options (hoặc `window.CopilotChatConfig` nếu bạn set trước).
|
|
25
|
+
|
|
26
|
+
### React/Next.js
|
|
27
|
+
|
|
28
|
+
```jsx
|
|
29
|
+
import { useEffect } from "react";
|
|
30
|
+
import { loadCopilotChatWidget } from "copilot-chat-widget";
|
|
31
|
+
|
|
32
|
+
export default function Page() {
|
|
33
|
+
useEffect(() => {
|
|
34
|
+
loadCopilotChatWidget({
|
|
35
|
+
token: process.env.NEXT_PUBLIC_CHAT_WIDGET_TOKEN
|
|
36
|
+
});
|
|
37
|
+
}, []);
|
|
38
|
+
|
|
39
|
+
return <main>Your page content</main>;
|
|
40
|
+
}
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
## Su dung qua the `<script>` (giu hanh vi cu)
|
|
44
|
+
|
|
45
|
+
```html
|
|
46
|
+
<script
|
|
47
|
+
src="https://cdn.example.com/chat-widget.min.js"
|
|
48
|
+
data-token="YOUR_WIDGET_TOKEN"
|
|
49
|
+
></script>
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
- `data-token`: bat buoc.
|
|
53
|
+
- `data-autoload="false"`: neu muon chen script nhung tu goi `window.CopilotChat.init()` sau.
|
|
54
|
+
|
|
55
|
+
## API cau hinh
|
|
56
|
+
|
|
57
|
+
- `token` (string, bat buoc): ma token widget.
|
|
58
|
+
- `autoload` (boolean): dat `false` neu muon tu goi `window.CopilotChat.load()`.
|
|
59
|
+
|
|
60
|
+
Khi script da load, co the goi:
|
|
61
|
+
|
|
62
|
+
```js
|
|
63
|
+
window.CopilotChat.open(); // mo widget
|
|
64
|
+
window.CopilotChat.close(); // dong widget
|
|
65
|
+
window.CopilotChat.load(); // khoi tao lai neu autoload=false
|
|
66
|
+
```
|
|
79
67
|
|
|
80
68
|
## Build va publish package
|
|
81
69
|
|
package/dist/chat-widget.min.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
(function(){"use strict";(
|
|
1
|
+
(function(){"use strict";(()=>{if(typeof window>"u"||typeof document>"u"||window.__copilotWidgetLoaded)return;window.__copilotWidgetLoaded=!0;const m=64,C=720,y=document.currentScript,x=t=>{if(!t?.src)return{};try{const e=new URL(t.src,window.location.href),r={};return e.searchParams.forEach((a,s)=>{r[s]=a}),r}catch(e){return console.warn("[CopilotChat] Failed to parse script query params:",e),{}}},E=t=>{document.readyState==="complete"||document.readyState==="interactive"?setTimeout(t,0):document.addEventListener("DOMContentLoaded",t)},S=t=>{if(!t?.src)return null;try{const e=new URL(t.src,window.location.href);return`${e.protocol}//${e.host}`}catch(e){return console.warn("[CopilotChat] Unable to infer base URL from script source.",e),null}},k=()=>y||Array.from(document.querySelectorAll("script")).reverse().find(r=>r.dataset?.token||r.src&&r.src.includes("chat-widget"))||null,U=({iframeUrl:t,launcherIcon:e})=>{const r=document.querySelector("[data-copilot-widget-root]");r&&r.remove();const a=document.createElement("div");a.setAttribute("data-copilot-widget-root","true");const s=a.attachShadow({mode:"open"});document.body.appendChild(a);const o=document.createElement("button");o.type="button",o.setAttribute("aria-label","Open Copilot chat"),o.innerHTML=`
|
|
2
2
|
<img
|
|
3
|
-
src="${
|
|
3
|
+
src="${e}"
|
|
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(o.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"}),o.onmouseover=()=>{o.style.transform="scale(1.12)",o.style.boxShadow="0 10px 25px rgba(0,0,0,0.3)"},o.onmouseout=()=>{o.style.transform="scale(1)",o.style.boxShadow="0 6px 14px rgba(0,0,0,0.25)"};const n=document.createElement("div");n.setAttribute("data-copilot-widget-root","true"),Object.assign(n.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 i=document.createElement("div"),l=document.createElement("div"),g=document.createElement("div");Object.assign(i.style,{position:"absolute",bottom:"-14px",right:"28px",width:"30px",height:"20px",pointerEvents:"none",display:"none",zIndex:"1"}),Object.assign(l.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(g.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"}),i.appendChild(l),i.appendChild(g);const d=document.createElement("div");Object.assign(d.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"}),s.appendChild(d);const c=document.createElement("iframe");c.src=t,c.title="Copilot chat widget",c.allow="clipboard-read; clipboard-write; microphone; camera; display-capture",c.setAttribute("scrolling","no"),Object.assign(c.style,{width:"100%",height:"100%",border:"none",display:"block",background:"transparent",overflow:"hidden"}),s.appendChild(d),d.appendChild(c),n.appendChild(i),n.appendChild(d),document.body.appendChild(o),document.body.appendChild(n);let p=!1;const u=()=>{p&&(p=!1,n.style.opacity="0",n.style.transform="scale(0.8) translateY(20px)",i.style.display="none",setTimeout(()=>{n.style.display="none"},250),o.style.transform="scale(1)")};o.onclick=h=>{h.stopPropagation(),p=!p,p?(n.style.display="block",i.style.display="block",requestAnimationFrame(()=>{n.style.opacity="1",n.style.transform="scale(1) translateY(0)"})):u()},window.addEventListener("message",h=>{h?.data?.type==="CHAT_CLOSED"&&u()}),document.addEventListener("click",h=>{const b=h.target;b&&p&&!n.contains(b)&&b!==o&&u()});const w={close:u,open:()=>{p||o.click()}};return window.CopilotChat=window.CopilotChat||{},window.CopilotChat.close=w.close,window.CopilotChat.open=w.open,window.CopilotChat.controls=w,w},f=t=>{console.error(`[CopilotChat] ${t}`)},L=()=>{const t=k();if(!t)return!1;const e=x(t),r=t.dataset||{},a=r.token||e.token,s=typeof window<"u"&&window.CopilotChatConfig&&window.CopilotChatConfig.token;return(a||s)&&r.autoload!=="false"},v=async(t={})=>{const e=t.scriptEl||k(),r=window.CopilotChatConfig||{},a=e?.dataset||{},s=x(e),o=t.token||r.token||a.token||s.token;if(!o)return f("Missing token (provide via init config, window.CopilotChatConfig.token, or data-token attribute)."),null;const n=S(e)||typeof window<"u"&&window.location?.origin||null;if(!n)return f("Unable to resolve base URL from embedding script or window.location."),null;try{const i=await fetch(`${n}/api/chat-widget/config?token=${encodeURIComponent(o)}`,{credentials:"omit",mode:"cors"});if(!i.ok)throw new Error(`Server responded with ${i.status}`);const l=await i.json();if(!l?.iframeUrl||!l?.launcherIcon)throw new Error("Received incomplete widget configuration from server.");return window.CopilotChat=window.CopilotChat||{},window.CopilotChat.init=(d={})=>{const c={iframeUrl:d.iframeUrl||l.iframeUrl,launcherIcon:d.launcherIcon||l.launcherIcon};return U(c)},window.CopilotChat.init(t)}catch(i){return f(i instanceof Error?i.message:"Unknown error during widget bootstrap."),null}};L()&&E(()=>{v()}),window.CopilotChat=window.CopilotChat||{},window.CopilotChat.load=v})()})();
|
package/dist/index.cjs
CHANGED
|
@@ -1,7 +1 @@
|
|
|
1
|
-
"use strict";(
|
|
2
|
-
<img
|
|
3
|
-
src="${n}"
|
|
4
|
-
alt="Copilot chat launcher"
|
|
5
|
-
style="width: 38px; height: 38px; object-fit: contain; border-radius: 50%; pointer-events: none;"
|
|
6
|
-
/>
|
|
7
|
-
`,Object.assign(t.style,{position:"fixed",bottom:"24px",right:"24px",width:`${b}px`,height:`${b}px`,borderRadius:"50%",border:"none",background:h,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:`${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 i=document.createElement("div"),c=document.createElement("div"),g=document.createElement("div");Object.assign(i.style,{position:"absolute",bottom:"-14px",right:"28px",width:"30px",height:"20px",pointerEvents:"none",display:"none",zIndex:"1"}),Object.assign(c.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(g.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"}),i.appendChild(c),i.appendChild(g);const s=document.createElement("div");Object.assign(s.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"}),u.appendChild(s);const d=document.createElement("iframe");d.src=e,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"}),u.appendChild(s),s.appendChild(d),o.appendChild(i),o.appendChild(s),document.body.appendChild(t),document.body.appendChild(o),window.addEventListener("message",p=>{p.data?.type==="WIDGET_READY"&&d.contentWindow.postMessage({type:"INIT_WIDGET"},"*")});let l=!1;const w=()=>{l&&(l=!1,o.style.opacity="0",o.style.transform="scale(0.8) translateY(20px)",i.style.display="none",setTimeout(()=>{o.style.display="none"},250),t.style.transform="scale(1)")};t.onclick=p=>{p.stopPropagation(),l=!l,l?(o.style.display="block",i.style.display="block",requestAnimationFrame(()=>{o.style.opacity="1",o.style.transform="scale(1) translateY(0)"})):w()},window.addEventListener("message",p=>{p?.data?.type==="CHAT_CLOSED"&&w()}),document.addEventListener("click",p=>{const x=p.target;x&&l&&!o.contains(x)&&x!==t&&w()});const y={close:w,open:()=>{l||t.click()}};return window.CopilotChat=window.CopilotChat||{},window.CopilotChat.close=y.close,window.CopilotChat.open=y.open,y},f=e=>{console.error(`[CopilotChat] ${e}`)},U=()=>E||Array.from(document.querySelectorAll("script")).reverse().find(r=>r.dataset?.token||r.src.includes("chat-widget"))||null;I(async()=>{const e=U();if(!e){f("Unable to locate the embedding script tag on the page.");return}const n=window.CopilotChatConfig||{},r=e.dataset||{},a=k(e),h=n.token||r.token||a.token;if(!h){f("Missing token (provide via window.CopilotChatConfig.token or data-token attribute).");return}const m=S(v),u=n.theme&&n.theme.accent||n.accent||r.themeAccent||a.themeAccent;try{const t=await fetch(`${m}/api/chat-widget/config?token=${encodeURIComponent(h)}`,{credentials:"omit",mode:"cors"});if(!t.ok)throw new Error(`Server responded with ${t.status}`);const o=await t.json();if(!o?.iframeUrl||!o?.launcherIcon)throw new Error("Received incomplete widget configuration from server.");const i={iframeUrl:o.iframeUrl,launcherIcon:o.launcherIcon,theme:{accent:u||o.theme?.accent||void 0}};window.CopilotChat=window.CopilotChat||{},window.CopilotChat.init=(c={})=>{const g={accent:c.theme?.accent||c.accent||i.theme.accent||(typeof n.theme=="object"?n.theme.accent:void 0)||n.accent},s={iframeUrl:c.iframeUrl||i.iframeUrl,launcherIcon:c.launcherIcon||i.launcherIcon,theme:g};return A(s)},window.CopilotChat.init(n)}catch(t){f(t instanceof Error?t.message:"Unknown error during widget bootstrap.")}})})();
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var n=typeof document<"u"?document.currentScript:null;function i(d={}){if(typeof window>"u"||typeof document>"u")return null;const{token:t,autoload:a}=d;window.CopilotChatConfig={...window.CopilotChatConfig,...d};const o=document.getElementById("copilot-chat-widget-loader");if(o)return t&&(o.dataset.token=t),a===!1&&(o.dataset.autoload="false"),o;const e=document.createElement("script");return e.id="copilot-chat-widget-loader",e.src=new URL("./chat-widget.min.js",typeof document>"u"?require("url").pathToFileURL(__filename).href:n&&n.tagName.toUpperCase()==="SCRIPT"&&n.src||new URL("index.cjs",document.baseURI).href).href,e.async=!0,t&&(e.dataset.token=t),a===!1&&(e.dataset.autoload="false"),document.body.appendChild(e),e}exports.default=i;exports.loadCopilotChatWidget=i;
|
package/dist/index.mjs
CHANGED
|
@@ -1,198 +1,18 @@
|
|
|
1
|
-
|
|
2
|
-
if (typeof window > "u" ||
|
|
3
|
-
return;
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
a && a.remove();
|
|
20
|
-
const { accent: h = "linear-gradient(135deg, #0078ff, #00c6ff)" } = r, m = document.createElement("div");
|
|
21
|
-
m.setAttribute("data-copilot-widget-root", "true");
|
|
22
|
-
const u = m.attachShadow({ mode: "open" });
|
|
23
|
-
document.body.appendChild(m);
|
|
24
|
-
const t = document.createElement("button");
|
|
25
|
-
t.type = "button", t.setAttribute("aria-label", "Open Copilot chat"), t.innerHTML = `
|
|
26
|
-
<img
|
|
27
|
-
src="${n}"
|
|
28
|
-
alt="Copilot chat launcher"
|
|
29
|
-
style="width: 38px; height: 38px; object-fit: contain; border-radius: 50%; pointer-events: none;"
|
|
30
|
-
/>
|
|
31
|
-
`, Object.assign(t.style, {
|
|
32
|
-
position: "fixed",
|
|
33
|
-
bottom: "24px",
|
|
34
|
-
right: "24px",
|
|
35
|
-
width: `${b}px`,
|
|
36
|
-
height: `${b}px`,
|
|
37
|
-
borderRadius: "50%",
|
|
38
|
-
border: "none",
|
|
39
|
-
background: h,
|
|
40
|
-
color: "white",
|
|
41
|
-
cursor: "pointer",
|
|
42
|
-
zIndex: 999998,
|
|
43
|
-
display: "flex",
|
|
44
|
-
alignItems: "center",
|
|
45
|
-
justifyContent: "center",
|
|
46
|
-
boxShadow: "0 6px 14px rgba(0,0,0,0.25)",
|
|
47
|
-
transition: "all 0.25s ease"
|
|
48
|
-
}), t.onmouseover = () => {
|
|
49
|
-
t.style.transform = "scale(1.12)", t.style.boxShadow = "0 10px 25px rgba(0,0,0,0.3)";
|
|
50
|
-
}, t.onmouseout = () => {
|
|
51
|
-
t.style.transform = "scale(1)", t.style.boxShadow = "0 6px 14px rgba(0,0,0,0.25)";
|
|
52
|
-
};
|
|
53
|
-
const o = document.createElement("div");
|
|
54
|
-
o.setAttribute("data-copilot-widget-root", "true"), Object.assign(o.style, {
|
|
55
|
-
display: "none",
|
|
56
|
-
position: "fixed",
|
|
57
|
-
bottom: `${b + 36}px`,
|
|
58
|
-
right: "24px",
|
|
59
|
-
zIndex: "999999",
|
|
60
|
-
transformOrigin: "bottom right",
|
|
61
|
-
transform: "scale(0.8) translateY(20px)",
|
|
62
|
-
opacity: "0",
|
|
63
|
-
transition: "all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55)"
|
|
64
|
-
});
|
|
65
|
-
const i = document.createElement("div"), c = document.createElement("div"), g = document.createElement("div");
|
|
66
|
-
Object.assign(i.style, {
|
|
67
|
-
position: "absolute",
|
|
68
|
-
bottom: "-14px",
|
|
69
|
-
right: "28px",
|
|
70
|
-
width: "30px",
|
|
71
|
-
height: "20px",
|
|
72
|
-
pointerEvents: "none",
|
|
73
|
-
display: "none",
|
|
74
|
-
zIndex: "1"
|
|
75
|
-
}), Object.assign(c.style, {
|
|
76
|
-
position: "absolute",
|
|
77
|
-
bottom: "0",
|
|
78
|
-
left: "0",
|
|
79
|
-
right: "0",
|
|
80
|
-
margin: "0 auto",
|
|
81
|
-
width: "0",
|
|
82
|
-
height: "0",
|
|
83
|
-
borderLeft: "15px solid transparent",
|
|
84
|
-
borderRight: "15px solid transparent",
|
|
85
|
-
borderTop: "15px solid rgba(15,23,42,0.1)"
|
|
86
|
-
}), Object.assign(g.style, {
|
|
87
|
-
position: "absolute",
|
|
88
|
-
bottom: "2px",
|
|
89
|
-
left: "0",
|
|
90
|
-
right: "0",
|
|
91
|
-
margin: "0 auto",
|
|
92
|
-
width: "0",
|
|
93
|
-
height: "0",
|
|
94
|
-
borderLeft: "13px solid transparent",
|
|
95
|
-
borderRight: "13px solid transparent",
|
|
96
|
-
borderTop: "13px solid white",
|
|
97
|
-
boxShadow: "0 6px 16px rgba(15,23,42,0.12)",
|
|
98
|
-
borderRadius: "2px"
|
|
99
|
-
}), i.appendChild(c), i.appendChild(g);
|
|
100
|
-
const s = document.createElement("div");
|
|
101
|
-
Object.assign(s.style, {
|
|
102
|
-
width: `${C}px`,
|
|
103
|
-
maxWidth: "calc(100vw - 48px)",
|
|
104
|
-
// keep height responsive to viewport to avoid outer scrollbars
|
|
105
|
-
height: `${Math.min(C, Math.max(320, window.innerHeight - 140))}px`,
|
|
106
|
-
maxHeight: "calc(100vh - 150px)",
|
|
107
|
-
borderRadius: "20px",
|
|
108
|
-
background: "white",
|
|
109
|
-
border: "1px solid rgba(15,23,42,0.12)",
|
|
110
|
-
boxShadow: "0 18px 45px rgba(15,23,42,0.16)",
|
|
111
|
-
overflow: "hidden"
|
|
112
|
-
}), u.appendChild(s);
|
|
113
|
-
const d = document.createElement("iframe");
|
|
114
|
-
d.src = e, d.title = "Copilot chat widget", d.allow = "clipboard-read; clipboard-write; microphone; camera; display-capture", d.setAttribute("scrolling", "no"), Object.assign(d.style, {
|
|
115
|
-
width: "100%",
|
|
116
|
-
height: "100%",
|
|
117
|
-
border: "none",
|
|
118
|
-
display: "block",
|
|
119
|
-
background: "transparent",
|
|
120
|
-
overflow: "hidden"
|
|
121
|
-
}), u.appendChild(s), s.appendChild(d), o.appendChild(i), o.appendChild(s), document.body.appendChild(t), document.body.appendChild(o), window.addEventListener("message", (p) => {
|
|
122
|
-
p.data?.type === "WIDGET_READY" && d.contentWindow.postMessage(
|
|
123
|
-
{ type: "INIT_WIDGET" },
|
|
124
|
-
"*"
|
|
125
|
-
);
|
|
126
|
-
});
|
|
127
|
-
let l = !1;
|
|
128
|
-
const w = () => {
|
|
129
|
-
l && (l = !1, o.style.opacity = "0", o.style.transform = "scale(0.8) translateY(20px)", i.style.display = "none", setTimeout(() => {
|
|
130
|
-
o.style.display = "none";
|
|
131
|
-
}, 250), t.style.transform = "scale(1)");
|
|
132
|
-
};
|
|
133
|
-
t.onclick = (p) => {
|
|
134
|
-
p.stopPropagation(), l = !l, l ? (o.style.display = "block", i.style.display = "block", requestAnimationFrame(() => {
|
|
135
|
-
o.style.opacity = "1", o.style.transform = "scale(1) translateY(0)";
|
|
136
|
-
})) : w();
|
|
137
|
-
}, window.addEventListener("message", (p) => {
|
|
138
|
-
p?.data?.type === "CHAT_CLOSED" && w();
|
|
139
|
-
}), document.addEventListener("click", (p) => {
|
|
140
|
-
const x = p.target;
|
|
141
|
-
x && l && !o.contains(x) && x !== t && w();
|
|
142
|
-
});
|
|
143
|
-
const y = {
|
|
144
|
-
close: w,
|
|
145
|
-
open: () => {
|
|
146
|
-
l || t.click();
|
|
147
|
-
}
|
|
148
|
-
};
|
|
149
|
-
return window.CopilotChat = window.CopilotChat || {}, window.CopilotChat.close = y.close, window.CopilotChat.open = y.open, y;
|
|
150
|
-
}, f = (e) => {
|
|
151
|
-
console.error(`[CopilotChat] ${e}`);
|
|
152
|
-
}, U = () => E || Array.from(document.querySelectorAll("script")).reverse().find((r) => r.dataset?.token || r.src.includes("chat-widget")) || null;
|
|
153
|
-
I(async () => {
|
|
154
|
-
const e = U();
|
|
155
|
-
if (!e) {
|
|
156
|
-
f("Unable to locate the embedding script tag on the page.");
|
|
157
|
-
return;
|
|
158
|
-
}
|
|
159
|
-
const n = window.CopilotChatConfig || {}, r = e.dataset || {}, a = k(e), h = n.token || r.token || a.token;
|
|
160
|
-
if (!h) {
|
|
161
|
-
f("Missing token (provide via window.CopilotChatConfig.token or data-token attribute).");
|
|
162
|
-
return;
|
|
163
|
-
}
|
|
164
|
-
const m = S(
|
|
165
|
-
v
|
|
166
|
-
), u = n.theme && n.theme.accent || n.accent || r.themeAccent || a.themeAccent;
|
|
167
|
-
try {
|
|
168
|
-
const t = await fetch(`${m}/api/chat-widget/config?token=${encodeURIComponent(h)}`, {
|
|
169
|
-
credentials: "omit",
|
|
170
|
-
mode: "cors"
|
|
171
|
-
});
|
|
172
|
-
if (!t.ok)
|
|
173
|
-
throw new Error(`Server responded with ${t.status}`);
|
|
174
|
-
const o = await t.json();
|
|
175
|
-
if (!o?.iframeUrl || !o?.launcherIcon)
|
|
176
|
-
throw new Error("Received incomplete widget configuration from server.");
|
|
177
|
-
const i = {
|
|
178
|
-
iframeUrl: o.iframeUrl,
|
|
179
|
-
launcherIcon: o.launcherIcon,
|
|
180
|
-
theme: {
|
|
181
|
-
accent: u || o.theme?.accent || void 0
|
|
182
|
-
}
|
|
183
|
-
};
|
|
184
|
-
window.CopilotChat = window.CopilotChat || {}, window.CopilotChat.init = (c = {}) => {
|
|
185
|
-
const g = {
|
|
186
|
-
accent: c.theme?.accent || c.accent || i.theme.accent || (typeof n.theme == "object" ? n.theme.accent : void 0) || n.accent
|
|
187
|
-
}, s = {
|
|
188
|
-
iframeUrl: c.iframeUrl || i.iframeUrl,
|
|
189
|
-
launcherIcon: c.launcherIcon || i.launcherIcon,
|
|
190
|
-
theme: g
|
|
191
|
-
};
|
|
192
|
-
return A(s);
|
|
193
|
-
}, window.CopilotChat.init(n);
|
|
194
|
-
} catch (t) {
|
|
195
|
-
f(t instanceof Error ? t.message : "Unknown error during widget bootstrap.");
|
|
196
|
-
}
|
|
197
|
-
});
|
|
198
|
-
})();
|
|
1
|
+
function n(a = {}) {
|
|
2
|
+
if (typeof window > "u" || typeof document > "u")
|
|
3
|
+
return null;
|
|
4
|
+
const { token: e, autoload: d } = a;
|
|
5
|
+
window.CopilotChatConfig = {
|
|
6
|
+
...window.CopilotChatConfig,
|
|
7
|
+
...a
|
|
8
|
+
};
|
|
9
|
+
const o = document.getElementById("copilot-chat-widget-loader");
|
|
10
|
+
if (o)
|
|
11
|
+
return e && (o.dataset.token = e), d === !1 && (o.dataset.autoload = "false"), o;
|
|
12
|
+
const t = document.createElement("script");
|
|
13
|
+
return t.id = "copilot-chat-widget-loader", t.src = new URL("./chat-widget.min.js", import.meta.url).href, t.async = !0, e && (t.dataset.token = e), d === !1 && (t.dataset.autoload = "false"), document.body.appendChild(t), t;
|
|
14
|
+
}
|
|
15
|
+
export {
|
|
16
|
+
n as default,
|
|
17
|
+
n as loadCopilotChatWidget
|
|
18
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "copilot-chat-widget",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.3",
|
|
4
4
|
"description": "Embeddable Copilot chat widget that can be loaded via NPM or a script tag.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.cjs",
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
"src"
|
|
20
20
|
],
|
|
21
21
|
"scripts": {
|
|
22
|
-
"build": "vite build --config ./vite.config.mjs",
|
|
22
|
+
"build": "vite build --config ./vite.config.module.mjs && vite build --config ./vite.config.runtime.mjs",
|
|
23
23
|
"prepare": "npm run build"
|
|
24
24
|
},
|
|
25
25
|
"keywords": [
|
package/src/index.d.ts
ADDED
package/src/index.js
CHANGED
|
@@ -1,371 +1,32 @@
|
|
|
1
|
-
|
|
2
|
-
if (typeof window === "undefined") {
|
|
3
|
-
return;
|
|
4
|
-
}
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
window.
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
const
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
if (document.readyState === "complete" || document.readyState === "interactive") {
|
|
34
|
-
setTimeout(fn, 0);
|
|
35
|
-
} else {
|
|
36
|
-
document.addEventListener("DOMContentLoaded", fn);
|
|
37
|
-
}
|
|
38
|
-
};
|
|
39
|
-
|
|
40
|
-
const normalizeBaseUrl = (url) => {
|
|
41
|
-
if (!url) return DEFAULT_BASE_URL;
|
|
42
|
-
return url.endsWith("/") ? url.slice(0, -1) : url;
|
|
43
|
-
};
|
|
44
|
-
|
|
45
|
-
const inferBaseUrlFromScript = (scriptEl) => {
|
|
46
|
-
if (!scriptEl?.src) return null;
|
|
47
|
-
try {
|
|
48
|
-
const srcUrl = new URL(scriptEl.src, window.location.href);
|
|
49
|
-
return `${srcUrl.protocol}//${srcUrl.host}`;
|
|
50
|
-
} catch (error) {
|
|
51
|
-
console.warn("[CopilotChat] Unable to infer base URL from script source.", error);
|
|
52
|
-
return null;
|
|
53
|
-
}
|
|
54
|
-
};
|
|
55
|
-
|
|
56
|
-
const buildWidget = ({ iframeUrl, launcherIcon, theme = {} }) => {
|
|
57
|
-
const existingRoot = document.querySelector("[data-copilot-widget-root]");
|
|
58
|
-
if (existingRoot) {
|
|
59
|
-
existingRoot.remove();
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
const { accent = "linear-gradient(135deg, #0078ff, #00c6ff)" } = theme;
|
|
63
|
-
|
|
64
|
-
// ---------- Shadow DOM container ----------
|
|
65
|
-
const containerHost = document.createElement("div");
|
|
66
|
-
containerHost.setAttribute("data-copilot-widget-root", "true");
|
|
67
|
-
const shadow = containerHost.attachShadow({ mode: "open" });
|
|
68
|
-
document.body.appendChild(containerHost);
|
|
69
|
-
|
|
70
|
-
// ---------- Button ----------
|
|
71
|
-
const btn = document.createElement("button");
|
|
72
|
-
btn.type = "button";
|
|
73
|
-
btn.setAttribute("aria-label", "Open Copilot chat");
|
|
74
|
-
btn.innerHTML = `
|
|
75
|
-
<img
|
|
76
|
-
src="${launcherIcon}"
|
|
77
|
-
alt="Copilot chat launcher"
|
|
78
|
-
style="width: 38px; height: 38px; object-fit: contain; border-radius: 50%; pointer-events: none;"
|
|
79
|
-
/>
|
|
80
|
-
`;
|
|
81
|
-
|
|
82
|
-
Object.assign(btn.style, {
|
|
83
|
-
position: "fixed",
|
|
84
|
-
bottom: "24px",
|
|
85
|
-
right: "24px",
|
|
86
|
-
width: `${BUTTON_SIZE}px`,
|
|
87
|
-
height: `${BUTTON_SIZE}px`,
|
|
88
|
-
borderRadius: "50%",
|
|
89
|
-
border: "none",
|
|
90
|
-
background: accent,
|
|
91
|
-
color: "white",
|
|
92
|
-
cursor: "pointer",
|
|
93
|
-
zIndex: 999998,
|
|
94
|
-
display: "flex",
|
|
95
|
-
alignItems: "center",
|
|
96
|
-
justifyContent: "center",
|
|
97
|
-
boxShadow: "0 6px 14px rgba(0,0,0,0.25)",
|
|
98
|
-
transition: "all 0.25s ease",
|
|
99
|
-
});
|
|
100
|
-
|
|
101
|
-
btn.onmouseover = () => {
|
|
102
|
-
btn.style.transform = "scale(1.12)";
|
|
103
|
-
btn.style.boxShadow = "0 10px 25px rgba(0,0,0,0.3)";
|
|
104
|
-
};
|
|
105
|
-
btn.onmouseout = () => {
|
|
106
|
-
btn.style.transform = "scale(1)";
|
|
107
|
-
btn.style.boxShadow = "0 6px 14px rgba(0,0,0,0.25)";
|
|
108
|
-
};
|
|
109
|
-
|
|
110
|
-
const container = document.createElement("div");
|
|
111
|
-
container.setAttribute("data-copilot-widget-root", "true");
|
|
112
|
-
Object.assign(container.style, {
|
|
113
|
-
display: "none",
|
|
114
|
-
position: "fixed",
|
|
115
|
-
bottom: `${BUTTON_SIZE + 36}px`,
|
|
116
|
-
right: "24px",
|
|
117
|
-
zIndex: "999999",
|
|
118
|
-
transformOrigin: "bottom right",
|
|
119
|
-
transform: "scale(0.8) translateY(20px)",
|
|
120
|
-
opacity: "0",
|
|
121
|
-
transition: "all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55)",
|
|
122
|
-
});
|
|
123
|
-
|
|
124
|
-
const arrow = document.createElement("div");
|
|
125
|
-
const arrowBorder = document.createElement("div");
|
|
126
|
-
const arrowFill = document.createElement("div");
|
|
127
|
-
|
|
128
|
-
Object.assign(arrow.style, {
|
|
129
|
-
position: "absolute",
|
|
130
|
-
bottom: "-14px",
|
|
131
|
-
right: "28px",
|
|
132
|
-
width: "30px",
|
|
133
|
-
height: "20px",
|
|
134
|
-
pointerEvents: "none",
|
|
135
|
-
display: "none",
|
|
136
|
-
zIndex: "1",
|
|
137
|
-
});
|
|
138
|
-
|
|
139
|
-
Object.assign(arrowBorder.style, {
|
|
140
|
-
position: "absolute",
|
|
141
|
-
bottom: "0",
|
|
142
|
-
left: "0",
|
|
143
|
-
right: "0",
|
|
144
|
-
margin: "0 auto",
|
|
145
|
-
width: "0",
|
|
146
|
-
height: "0",
|
|
147
|
-
borderLeft: "15px solid transparent",
|
|
148
|
-
borderRight: "15px solid transparent",
|
|
149
|
-
borderTop: "15px solid rgba(15,23,42,0.1)",
|
|
150
|
-
});
|
|
151
|
-
|
|
152
|
-
Object.assign(arrowFill.style, {
|
|
153
|
-
position: "absolute",
|
|
154
|
-
bottom: "2px",
|
|
155
|
-
left: "0",
|
|
156
|
-
right: "0",
|
|
157
|
-
margin: "0 auto",
|
|
158
|
-
width: "0",
|
|
159
|
-
height: "0",
|
|
160
|
-
borderLeft: "13px solid transparent",
|
|
161
|
-
borderRight: "13px solid transparent",
|
|
162
|
-
borderTop: "13px solid white",
|
|
163
|
-
boxShadow: "0 6px 16px rgba(15,23,42,0.12)",
|
|
164
|
-
borderRadius: "2px",
|
|
165
|
-
});
|
|
166
|
-
|
|
167
|
-
arrow.appendChild(arrowBorder);
|
|
168
|
-
arrow.appendChild(arrowFill);
|
|
169
|
-
|
|
170
|
-
const frameWrapper = document.createElement("div");
|
|
171
|
-
Object.assign(frameWrapper.style, {
|
|
172
|
-
width: `${IFRAME_SIZE}px`,
|
|
173
|
-
maxWidth: "calc(100vw - 48px)",
|
|
174
|
-
// keep height responsive to viewport to avoid outer scrollbars
|
|
175
|
-
height: `${Math.min(IFRAME_SIZE, Math.max(320, window.innerHeight - 140))}px`,
|
|
176
|
-
maxHeight: "calc(100vh - 150px)",
|
|
177
|
-
borderRadius: "20px",
|
|
178
|
-
background: "white",
|
|
179
|
-
border: "1px solid rgba(15,23,42,0.12)",
|
|
180
|
-
boxShadow: "0 18px 45px rgba(15,23,42,0.16)",
|
|
181
|
-
overflow: "hidden",
|
|
182
|
-
});
|
|
183
|
-
shadow.appendChild(frameWrapper);
|
|
184
|
-
|
|
185
|
-
const iframe = document.createElement("iframe");
|
|
186
|
-
iframe.src = iframeUrl;
|
|
187
|
-
iframe.title = "Copilot chat widget";
|
|
188
|
-
iframe.allow = "clipboard-read; clipboard-write; microphone; camera; display-capture";
|
|
189
|
-
iframe.setAttribute("scrolling", "no");
|
|
190
|
-
Object.assign(iframe.style, {
|
|
191
|
-
width: "100%",
|
|
192
|
-
height: "100%",
|
|
193
|
-
border: "none",
|
|
194
|
-
display: "block",
|
|
195
|
-
background: "transparent",
|
|
196
|
-
overflow: "hidden",
|
|
197
|
-
});
|
|
198
|
-
|
|
199
|
-
shadow.appendChild(frameWrapper);
|
|
200
|
-
frameWrapper.appendChild(iframe);
|
|
201
|
-
|
|
202
|
-
container.appendChild(arrow);
|
|
203
|
-
container.appendChild(frameWrapper);
|
|
204
|
-
document.body.appendChild(btn);
|
|
205
|
-
document.body.appendChild(container);
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
window.addEventListener("message", (event) => {
|
|
209
|
-
if (event.data?.type === "WIDGET_READY") {
|
|
210
|
-
iframe.contentWindow.postMessage(
|
|
211
|
-
{ type: "INIT_WIDGET" },
|
|
212
|
-
"*"
|
|
213
|
-
);
|
|
214
|
-
}
|
|
215
|
-
});
|
|
216
|
-
|
|
217
|
-
let isOpen = false;
|
|
218
|
-
|
|
219
|
-
const closeChat = () => {
|
|
220
|
-
if (!isOpen) return;
|
|
221
|
-
isOpen = false;
|
|
222
|
-
container.style.opacity = "0";
|
|
223
|
-
container.style.transform = "scale(0.8) translateY(20px)";
|
|
224
|
-
arrow.style.display = "none";
|
|
225
|
-
setTimeout(() => {
|
|
226
|
-
container.style.display = "none";
|
|
227
|
-
}, 250);
|
|
228
|
-
btn.style.transform = "scale(1)";
|
|
229
|
-
};
|
|
230
|
-
|
|
231
|
-
btn.onclick = (event) => {
|
|
232
|
-
event.stopPropagation();
|
|
233
|
-
isOpen = !isOpen;
|
|
234
|
-
if (isOpen) {
|
|
235
|
-
container.style.display = "block";
|
|
236
|
-
arrow.style.display = "block";
|
|
237
|
-
requestAnimationFrame(() => {
|
|
238
|
-
container.style.opacity = "1";
|
|
239
|
-
container.style.transform = "scale(1) translateY(0)";
|
|
240
|
-
});
|
|
241
|
-
} else {
|
|
242
|
-
closeChat();
|
|
243
|
-
}
|
|
244
|
-
};
|
|
245
|
-
|
|
246
|
-
window.addEventListener("message", (event) => {
|
|
247
|
-
if (event?.data?.type === "CHAT_CLOSED") {
|
|
248
|
-
closeChat();
|
|
249
|
-
}
|
|
250
|
-
});
|
|
251
|
-
|
|
252
|
-
document.addEventListener("click", (event) => {
|
|
253
|
-
const target = event.target;
|
|
254
|
-
if (!target) return;
|
|
255
|
-
if (isOpen && !container.contains(target) && target !== btn) {
|
|
256
|
-
closeChat();
|
|
257
|
-
}
|
|
258
|
-
});
|
|
259
|
-
|
|
260
|
-
const controls = {
|
|
261
|
-
close: closeChat,
|
|
262
|
-
open: () => {
|
|
263
|
-
if (!isOpen) {
|
|
264
|
-
btn.click();
|
|
265
|
-
}
|
|
266
|
-
},
|
|
267
|
-
};
|
|
268
|
-
|
|
269
|
-
window.CopilotChat = window.CopilotChat || {};
|
|
270
|
-
window.CopilotChat.close = controls.close;
|
|
271
|
-
window.CopilotChat.open = controls.open;
|
|
272
|
-
|
|
273
|
-
return controls;
|
|
274
|
-
};
|
|
275
|
-
|
|
276
|
-
const handleError = (message) => {
|
|
277
|
-
console.error(`[CopilotChat] ${message}`);
|
|
278
|
-
};
|
|
279
|
-
|
|
280
|
-
const resolveEmbeddingScript = () => {
|
|
281
|
-
if (embeddingScript) {
|
|
282
|
-
return embeddingScript;
|
|
283
|
-
}
|
|
284
|
-
|
|
285
|
-
const scripts = Array.from(document.querySelectorAll("script"));
|
|
286
|
-
const candidate = scripts
|
|
287
|
-
.reverse()
|
|
288
|
-
.find((script) => script.dataset?.token || script.src.includes("chat-widget"));
|
|
289
|
-
|
|
290
|
-
return candidate || null;
|
|
291
|
-
};
|
|
292
|
-
|
|
293
|
-
ready(async () => {
|
|
294
|
-
const scriptEl = resolveEmbeddingScript();
|
|
295
|
-
if (!scriptEl) {
|
|
296
|
-
handleError("Unable to locate the embedding script tag on the page.");
|
|
297
|
-
return;
|
|
298
|
-
}
|
|
299
|
-
|
|
300
|
-
const globalConfig = window.CopilotChatConfig || {};
|
|
301
|
-
const datasetConfig = scriptEl.dataset || {};
|
|
302
|
-
const queryConfig = readQueryConfig(scriptEl);
|
|
303
|
-
|
|
304
|
-
const token = globalConfig.token || datasetConfig.token || queryConfig.token;
|
|
305
|
-
if (!token) {
|
|
306
|
-
handleError("Missing token (provide via window.CopilotChatConfig.token or data-token attribute).");
|
|
307
|
-
return;
|
|
308
|
-
}
|
|
309
|
-
|
|
310
|
-
const baseUrl = normalizeBaseUrl(
|
|
311
|
-
ENV_BASE_URL ||
|
|
312
|
-
globalConfig.baseUrl ||
|
|
313
|
-
datasetConfig.baseUrl ||
|
|
314
|
-
queryConfig.baseUrl ||
|
|
315
|
-
inferBaseUrlFromScript(scriptEl)
|
|
316
|
-
);
|
|
317
|
-
const themeAccent =
|
|
318
|
-
(globalConfig.theme && globalConfig.theme.accent) ||
|
|
319
|
-
globalConfig.accent ||
|
|
320
|
-
datasetConfig.themeAccent ||
|
|
321
|
-
queryConfig.themeAccent;
|
|
322
|
-
|
|
323
|
-
try {
|
|
324
|
-
const response = await fetch(`${baseUrl}/api/chat-widget/config?token=${encodeURIComponent(token)}`, {
|
|
325
|
-
credentials: "omit",
|
|
326
|
-
mode: "cors",
|
|
327
|
-
});
|
|
328
|
-
|
|
329
|
-
if (!response.ok) {
|
|
330
|
-
throw new Error(`Server responded with ${response.status}`);
|
|
331
|
-
}
|
|
332
|
-
|
|
333
|
-
const config = await response.json();
|
|
334
|
-
if (!config?.iframeUrl || !config?.launcherIcon) {
|
|
335
|
-
throw new Error("Received incomplete widget configuration from server.");
|
|
336
|
-
}
|
|
337
|
-
|
|
338
|
-
const baseConfig = {
|
|
339
|
-
iframeUrl: config.iframeUrl,
|
|
340
|
-
launcherIcon: config.launcherIcon,
|
|
341
|
-
theme: {
|
|
342
|
-
accent: themeAccent || config.theme?.accent || undefined,
|
|
343
|
-
},
|
|
344
|
-
};
|
|
345
|
-
|
|
346
|
-
window.CopilotChat = window.CopilotChat || {};
|
|
347
|
-
window.CopilotChat.init = (overrides = {}) => {
|
|
348
|
-
const mergedTheme = {
|
|
349
|
-
accent:
|
|
350
|
-
overrides.theme?.accent ||
|
|
351
|
-
overrides.accent ||
|
|
352
|
-
baseConfig.theme.accent ||
|
|
353
|
-
(typeof globalConfig.theme === "object" ? globalConfig.theme.accent : undefined) ||
|
|
354
|
-
globalConfig.accent,
|
|
355
|
-
};
|
|
356
|
-
|
|
357
|
-
const mergedConfig = {
|
|
358
|
-
iframeUrl: overrides.iframeUrl || baseConfig.iframeUrl,
|
|
359
|
-
launcherIcon: overrides.launcherIcon || baseConfig.launcherIcon,
|
|
360
|
-
theme: mergedTheme,
|
|
361
|
-
};
|
|
362
|
-
|
|
363
|
-
return buildWidget(mergedConfig);
|
|
364
|
-
};
|
|
365
|
-
|
|
366
|
-
window.CopilotChat.init(globalConfig);
|
|
367
|
-
} catch (error) {
|
|
368
|
-
handleError(error instanceof Error ? error.message : "Unknown error during widget bootstrap.");
|
|
369
|
-
}
|
|
370
|
-
});
|
|
371
|
-
})();
|
|
1
|
+
export function loadCopilotChatWidget(options = {}) {
|
|
2
|
+
if (typeof window === "undefined" || typeof document === "undefined") {
|
|
3
|
+
return null;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
const { token, autoload } = options;
|
|
7
|
+
|
|
8
|
+
// persist config for runtime script
|
|
9
|
+
window.CopilotChatConfig = {
|
|
10
|
+
...window.CopilotChatConfig,
|
|
11
|
+
...options,
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
const existing = document.getElementById("copilot-chat-widget-loader");
|
|
15
|
+
if (existing) {
|
|
16
|
+
if (token) existing.dataset.token = token;
|
|
17
|
+
if (autoload === false) existing.dataset.autoload = "false";
|
|
18
|
+
return existing;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
const script = document.createElement("script");
|
|
22
|
+
script.id = "copilot-chat-widget-loader";
|
|
23
|
+
script.src = new URL("./chat-widget.min.js", import.meta.url).href;
|
|
24
|
+
script.async = true;
|
|
25
|
+
if (token) script.dataset.token = token;
|
|
26
|
+
if (autoload === false) script.dataset.autoload = "false";
|
|
27
|
+
|
|
28
|
+
document.body.appendChild(script);
|
|
29
|
+
return script;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
export default loadCopilotChatWidget;
|
|
@@ -0,0 +1,345 @@
|
|
|
1
|
+
(() => {
|
|
2
|
+
if (typeof window === "undefined" || typeof document === "undefined") return;
|
|
3
|
+
if (window.__copilotWidgetLoaded) return;
|
|
4
|
+
window.__copilotWidgetLoaded = true;
|
|
5
|
+
|
|
6
|
+
const BUTTON_SIZE = 64;
|
|
7
|
+
const IFRAME_SIZE = 720;
|
|
8
|
+
const embeddingScript = document.currentScript;
|
|
9
|
+
|
|
10
|
+
const readQueryConfig = (scriptEl) => {
|
|
11
|
+
if (!scriptEl?.src) return {};
|
|
12
|
+
try {
|
|
13
|
+
const url = new URL(scriptEl.src, window.location.href);
|
|
14
|
+
const params = {};
|
|
15
|
+
url.searchParams.forEach((value, key) => {
|
|
16
|
+
params[key] = value;
|
|
17
|
+
});
|
|
18
|
+
return params;
|
|
19
|
+
} catch (error) {
|
|
20
|
+
console.warn("[CopilotChat] Failed to parse script query params:", error);
|
|
21
|
+
return {};
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
const ready = (fn) => {
|
|
26
|
+
if (document.readyState === "complete" || document.readyState === "interactive") {
|
|
27
|
+
setTimeout(fn, 0);
|
|
28
|
+
} else {
|
|
29
|
+
document.addEventListener("DOMContentLoaded", fn);
|
|
30
|
+
}
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
const inferBaseUrlFromScript = (scriptEl) => {
|
|
34
|
+
if (!scriptEl?.src) return null;
|
|
35
|
+
try {
|
|
36
|
+
const srcUrl = new URL(scriptEl.src, window.location.href);
|
|
37
|
+
return `${srcUrl.protocol}//${srcUrl.host}`;
|
|
38
|
+
} catch (error) {
|
|
39
|
+
console.warn("[CopilotChat] Unable to infer base URL from script source.", error);
|
|
40
|
+
return null;
|
|
41
|
+
}
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
const resolveEmbeddingScript = () => {
|
|
45
|
+
if (embeddingScript) {
|
|
46
|
+
return embeddingScript;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
const scripts = Array.from(document.querySelectorAll("script"));
|
|
50
|
+
const candidate = scripts
|
|
51
|
+
.reverse()
|
|
52
|
+
.find((script) => script.dataset?.token || (script.src && script.src.includes("chat-widget")));
|
|
53
|
+
|
|
54
|
+
return candidate || null;
|
|
55
|
+
};
|
|
56
|
+
|
|
57
|
+
const buildWidget = ({ iframeUrl, launcherIcon }) => {
|
|
58
|
+
const existingRoot = document.querySelector("[data-copilot-widget-root]");
|
|
59
|
+
if (existingRoot) {
|
|
60
|
+
existingRoot.remove();
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
// ---------- Shadow DOM container ----------
|
|
64
|
+
const containerHost = document.createElement("div");
|
|
65
|
+
containerHost.setAttribute("data-copilot-widget-root", "true");
|
|
66
|
+
const shadow = containerHost.attachShadow({ mode: "open" });
|
|
67
|
+
document.body.appendChild(containerHost);
|
|
68
|
+
|
|
69
|
+
// ---------- Button ----------
|
|
70
|
+
const btn = document.createElement("button");
|
|
71
|
+
btn.type = "button";
|
|
72
|
+
btn.setAttribute("aria-label", "Open Copilot chat");
|
|
73
|
+
btn.innerHTML = `
|
|
74
|
+
<img
|
|
75
|
+
src="${launcherIcon}"
|
|
76
|
+
alt="Copilot chat launcher"
|
|
77
|
+
style="width: 38px; height: 38px; object-fit: contain; border-radius: 50%; pointer-events: none;"
|
|
78
|
+
/>
|
|
79
|
+
`;
|
|
80
|
+
|
|
81
|
+
Object.assign(btn.style, {
|
|
82
|
+
position: "fixed",
|
|
83
|
+
bottom: "24px",
|
|
84
|
+
right: "24px",
|
|
85
|
+
width: `${BUTTON_SIZE}px`,
|
|
86
|
+
height: `${BUTTON_SIZE}px`,
|
|
87
|
+
borderRadius: "50%",
|
|
88
|
+
border: "none",
|
|
89
|
+
background: "linear-gradient(135deg, #0078ff, #00c6ff)",
|
|
90
|
+
color: "white",
|
|
91
|
+
cursor: "pointer",
|
|
92
|
+
zIndex: 999998,
|
|
93
|
+
display: "flex",
|
|
94
|
+
alignItems: "center",
|
|
95
|
+
justifyContent: "center",
|
|
96
|
+
boxShadow: "0 6px 14px rgba(0,0,0,0.25)",
|
|
97
|
+
transition: "all 0.25s ease",
|
|
98
|
+
});
|
|
99
|
+
|
|
100
|
+
btn.onmouseover = () => {
|
|
101
|
+
btn.style.transform = "scale(1.12)";
|
|
102
|
+
btn.style.boxShadow = "0 10px 25px rgba(0,0,0,0.3)";
|
|
103
|
+
};
|
|
104
|
+
btn.onmouseout = () => {
|
|
105
|
+
btn.style.transform = "scale(1)";
|
|
106
|
+
btn.style.boxShadow = "0 6px 14px rgba(0,0,0,0.25)";
|
|
107
|
+
};
|
|
108
|
+
|
|
109
|
+
const container = document.createElement("div");
|
|
110
|
+
container.setAttribute("data-copilot-widget-root", "true");
|
|
111
|
+
Object.assign(container.style, {
|
|
112
|
+
display: "none",
|
|
113
|
+
position: "fixed",
|
|
114
|
+
bottom: `${BUTTON_SIZE + 36}px`,
|
|
115
|
+
right: "24px",
|
|
116
|
+
zIndex: "999999",
|
|
117
|
+
transformOrigin: "bottom right",
|
|
118
|
+
transform: "scale(0.8) translateY(20px)",
|
|
119
|
+
opacity: "0",
|
|
120
|
+
transition: "all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55)",
|
|
121
|
+
});
|
|
122
|
+
|
|
123
|
+
const arrow = document.createElement("div");
|
|
124
|
+
const arrowBorder = document.createElement("div");
|
|
125
|
+
const arrowFill = document.createElement("div");
|
|
126
|
+
|
|
127
|
+
Object.assign(arrow.style, {
|
|
128
|
+
position: "absolute",
|
|
129
|
+
bottom: "-14px",
|
|
130
|
+
right: "28px",
|
|
131
|
+
width: "30px",
|
|
132
|
+
height: "20px",
|
|
133
|
+
pointerEvents: "none",
|
|
134
|
+
display: "none",
|
|
135
|
+
zIndex: "1",
|
|
136
|
+
});
|
|
137
|
+
|
|
138
|
+
Object.assign(arrowBorder.style, {
|
|
139
|
+
position: "absolute",
|
|
140
|
+
bottom: "0",
|
|
141
|
+
left: "0",
|
|
142
|
+
right: "0",
|
|
143
|
+
margin: "0 auto",
|
|
144
|
+
width: "0",
|
|
145
|
+
height: "0",
|
|
146
|
+
borderLeft: "15px solid transparent",
|
|
147
|
+
borderRight: "15px solid transparent",
|
|
148
|
+
borderTop: "15px solid rgba(15,23,42,0.1)",
|
|
149
|
+
});
|
|
150
|
+
|
|
151
|
+
Object.assign(arrowFill.style, {
|
|
152
|
+
position: "absolute",
|
|
153
|
+
bottom: "2px",
|
|
154
|
+
left: "0",
|
|
155
|
+
right: "0",
|
|
156
|
+
margin: "0 auto",
|
|
157
|
+
width: "0",
|
|
158
|
+
height: "0",
|
|
159
|
+
borderLeft: "13px solid transparent",
|
|
160
|
+
borderRight: "13px solid transparent",
|
|
161
|
+
borderTop: "13px solid white",
|
|
162
|
+
boxShadow: "0 6px 16px rgba(15,23,42,0.12)",
|
|
163
|
+
borderRadius: "2px",
|
|
164
|
+
});
|
|
165
|
+
|
|
166
|
+
arrow.appendChild(arrowBorder);
|
|
167
|
+
arrow.appendChild(arrowFill);
|
|
168
|
+
|
|
169
|
+
const frameWrapper = document.createElement("div");
|
|
170
|
+
Object.assign(frameWrapper.style, {
|
|
171
|
+
width: `${IFRAME_SIZE}px`,
|
|
172
|
+
maxWidth: "calc(100vw - 48px)",
|
|
173
|
+
// keep height responsive to viewport to avoid outer scrollbars
|
|
174
|
+
height: `${Math.min(IFRAME_SIZE, Math.max(320, window.innerHeight - 140))}px`,
|
|
175
|
+
maxHeight: "calc(100vh - 150px)",
|
|
176
|
+
borderRadius: "20px",
|
|
177
|
+
background: "white",
|
|
178
|
+
border: "1px solid rgba(15,23,42,0.12)",
|
|
179
|
+
boxShadow: "0 18px 45px rgba(15,23,42,0.16)",
|
|
180
|
+
overflow: "hidden",
|
|
181
|
+
});
|
|
182
|
+
shadow.appendChild(frameWrapper);
|
|
183
|
+
|
|
184
|
+
const iframe = document.createElement("iframe");
|
|
185
|
+
iframe.src = iframeUrl;
|
|
186
|
+
iframe.title = "Copilot chat widget";
|
|
187
|
+
iframe.allow = "clipboard-read; clipboard-write; microphone; camera; display-capture";
|
|
188
|
+
iframe.setAttribute("scrolling", "no");
|
|
189
|
+
Object.assign(iframe.style, {
|
|
190
|
+
width: "100%",
|
|
191
|
+
height: "100%",
|
|
192
|
+
border: "none",
|
|
193
|
+
display: "block",
|
|
194
|
+
background: "transparent",
|
|
195
|
+
overflow: "hidden",
|
|
196
|
+
});
|
|
197
|
+
|
|
198
|
+
shadow.appendChild(frameWrapper);
|
|
199
|
+
frameWrapper.appendChild(iframe);
|
|
200
|
+
|
|
201
|
+
container.appendChild(arrow);
|
|
202
|
+
container.appendChild(frameWrapper);
|
|
203
|
+
document.body.appendChild(btn);
|
|
204
|
+
document.body.appendChild(container);
|
|
205
|
+
|
|
206
|
+
let isOpen = false;
|
|
207
|
+
|
|
208
|
+
const closeChat = () => {
|
|
209
|
+
if (!isOpen) return;
|
|
210
|
+
isOpen = false;
|
|
211
|
+
container.style.opacity = "0";
|
|
212
|
+
container.style.transform = "scale(0.8) translateY(20px)";
|
|
213
|
+
arrow.style.display = "none";
|
|
214
|
+
setTimeout(() => {
|
|
215
|
+
container.style.display = "none";
|
|
216
|
+
}, 250);
|
|
217
|
+
btn.style.transform = "scale(1)";
|
|
218
|
+
};
|
|
219
|
+
|
|
220
|
+
btn.onclick = (event) => {
|
|
221
|
+
event.stopPropagation();
|
|
222
|
+
isOpen = !isOpen;
|
|
223
|
+
if (isOpen) {
|
|
224
|
+
container.style.display = "block";
|
|
225
|
+
arrow.style.display = "block";
|
|
226
|
+
requestAnimationFrame(() => {
|
|
227
|
+
container.style.opacity = "1";
|
|
228
|
+
container.style.transform = "scale(1) translateY(0)";
|
|
229
|
+
});
|
|
230
|
+
} else {
|
|
231
|
+
closeChat();
|
|
232
|
+
}
|
|
233
|
+
};
|
|
234
|
+
|
|
235
|
+
window.addEventListener("message", (event) => {
|
|
236
|
+
if (event?.data?.type === "CHAT_CLOSED") {
|
|
237
|
+
closeChat();
|
|
238
|
+
}
|
|
239
|
+
});
|
|
240
|
+
|
|
241
|
+
document.addEventListener("click", (event) => {
|
|
242
|
+
const target = event.target;
|
|
243
|
+
if (!target) return;
|
|
244
|
+
if (isOpen && !container.contains(target) && target !== btn) {
|
|
245
|
+
closeChat();
|
|
246
|
+
}
|
|
247
|
+
});
|
|
248
|
+
|
|
249
|
+
const controls = {
|
|
250
|
+
close: closeChat,
|
|
251
|
+
open: () => {
|
|
252
|
+
if (!isOpen) {
|
|
253
|
+
btn.click();
|
|
254
|
+
}
|
|
255
|
+
},
|
|
256
|
+
};
|
|
257
|
+
|
|
258
|
+
window.CopilotChat = window.CopilotChat || {};
|
|
259
|
+
window.CopilotChat.close = controls.close;
|
|
260
|
+
window.CopilotChat.open = controls.open;
|
|
261
|
+
window.CopilotChat.controls = controls;
|
|
262
|
+
|
|
263
|
+
return controls;
|
|
264
|
+
};
|
|
265
|
+
|
|
266
|
+
const handleError = (message) => {
|
|
267
|
+
console.error(`[CopilotChat] ${message}`);
|
|
268
|
+
};
|
|
269
|
+
|
|
270
|
+
const shouldAutoBootstrapFromScript = () => {
|
|
271
|
+
const scriptEl = resolveEmbeddingScript();
|
|
272
|
+
if (!scriptEl) return false;
|
|
273
|
+
const queryConfig = readQueryConfig(scriptEl);
|
|
274
|
+
const dataset = scriptEl.dataset || {};
|
|
275
|
+
const hasTokenHint = dataset.token || queryConfig.token;
|
|
276
|
+
const hasGlobalToken = typeof window !== "undefined" && window.CopilotChatConfig && window.CopilotChatConfig.token;
|
|
277
|
+
return (hasTokenHint || hasGlobalToken) && dataset.autoload !== "false";
|
|
278
|
+
};
|
|
279
|
+
|
|
280
|
+
const initCopilotChatWidget = async (config = {}) => {
|
|
281
|
+
const scriptEl = config.scriptEl || resolveEmbeddingScript();
|
|
282
|
+
const globalConfig = window.CopilotChatConfig || {};
|
|
283
|
+
const datasetConfig = scriptEl?.dataset || {};
|
|
284
|
+
const queryConfig = readQueryConfig(scriptEl);
|
|
285
|
+
|
|
286
|
+
const token = config.token || globalConfig.token || datasetConfig.token || queryConfig.token;
|
|
287
|
+
|
|
288
|
+
if (!token) {
|
|
289
|
+
handleError("Missing token (provide via init config, window.CopilotChatConfig.token, or data-token attribute).");
|
|
290
|
+
return null;
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
const baseUrl =
|
|
294
|
+
inferBaseUrlFromScript(scriptEl) ||
|
|
295
|
+
(typeof window !== "undefined" && window.location?.origin) ||
|
|
296
|
+
null;
|
|
297
|
+
|
|
298
|
+
if (!baseUrl) {
|
|
299
|
+
handleError("Unable to resolve base URL from embedding script or window.location.");
|
|
300
|
+
return null;
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
try {
|
|
304
|
+
const response = await fetch(`${baseUrl}/api/chat-widget/config?token=${encodeURIComponent(token)}`, {
|
|
305
|
+
credentials: "omit",
|
|
306
|
+
mode: "cors",
|
|
307
|
+
});
|
|
308
|
+
|
|
309
|
+
if (!response.ok) {
|
|
310
|
+
throw new Error(`Server responded with ${response.status}`);
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
const remoteConfig = await response.json();
|
|
314
|
+
if (!remoteConfig?.iframeUrl || !remoteConfig?.launcherIcon) {
|
|
315
|
+
throw new Error("Received incomplete widget configuration from server.");
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
window.CopilotChat = window.CopilotChat || {};
|
|
319
|
+
window.CopilotChat.init = (overrides = {}) => {
|
|
320
|
+
const mergedConfig = {
|
|
321
|
+
iframeUrl: overrides.iframeUrl || remoteConfig.iframeUrl,
|
|
322
|
+
launcherIcon: overrides.launcherIcon || remoteConfig.launcherIcon,
|
|
323
|
+
};
|
|
324
|
+
|
|
325
|
+
return buildWidget(mergedConfig);
|
|
326
|
+
};
|
|
327
|
+
|
|
328
|
+
const controls = window.CopilotChat.init(config);
|
|
329
|
+
return controls;
|
|
330
|
+
} catch (error) {
|
|
331
|
+
handleError(error instanceof Error ? error.message : "Unknown error during widget bootstrap.");
|
|
332
|
+
return null;
|
|
333
|
+
}
|
|
334
|
+
};
|
|
335
|
+
|
|
336
|
+
if (shouldAutoBootstrapFromScript()) {
|
|
337
|
+
ready(() => {
|
|
338
|
+
initCopilotChatWidget();
|
|
339
|
+
});
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
// expose for manual bootstrap if autoload=false
|
|
343
|
+
window.CopilotChat = window.CopilotChat || {};
|
|
344
|
+
window.CopilotChat.load = initCopilotChatWidget;
|
|
345
|
+
})();
|
package/src/standalone.js
DELETED