@eka-care/medassist-widget-embed 0.2.16 → 0.2.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +81 -122
- package/dist/index.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,39 +1,33 @@
|
|
|
1
1
|
# @eka-care/medassist-widget-embed
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Lightweight, embeddable widget loader for MedAssist using Web Components. Add the script and the `<eka-medassist-widget>` custom element to any page for a framework-agnostic, lazy-loaded chat widget.
|
|
4
4
|
|
|
5
5
|
## Overview
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
- **
|
|
10
|
-
- **
|
|
11
|
-
- **
|
|
12
|
-
- **Isolated Styling**: Shadow DOM prevents style conflicts with host websites
|
|
13
|
-
- **Simple Integration**: Just add a script tag and custom element
|
|
7
|
+
- **Custom Web Component** – `<eka-medassist-widget>` for easy embedding
|
|
8
|
+
- **Lazy loading** – Widget assets load when the user opens the widget
|
|
9
|
+
- **Framework agnostic** – No React or build step required
|
|
10
|
+
- **Isolated styling** – Shadow DOM avoids conflicts with host styles
|
|
11
|
+
- **Simple integration** – Script tag + custom element
|
|
14
12
|
|
|
15
13
|
## Installation
|
|
16
14
|
|
|
17
|
-
Install from npm to self-host the assets or reference the package from a CDN such as jsDelivr or UNPKG:
|
|
18
|
-
|
|
19
15
|
```bash
|
|
20
16
|
npm install @eka-care/medassist-widget-embed
|
|
21
17
|
```
|
|
22
18
|
|
|
23
|
-
|
|
19
|
+
Or load from a CDN (replace the version as needed):
|
|
24
20
|
|
|
25
21
|
```html
|
|
26
22
|
<script
|
|
27
|
-
src="https://cdn.jsdelivr.net/npm/@eka-care/medassist-widget-embed@
|
|
23
|
+
src="https://cdn.jsdelivr.net/npm/@eka-care/medassist-widget-embed@latest/dist/index.js"
|
|
28
24
|
async></script>
|
|
29
25
|
```
|
|
30
26
|
|
|
31
|
-
|
|
27
|
+
For self-hosting, ensure the built widget assets (`medassist-widget.js`, `medassist-widget.css`) are served alongside `index.js`, or use the package’s default CDN for widget assets (see [How it works](#how-it-works)).
|
|
32
28
|
|
|
33
29
|
## Usage
|
|
34
30
|
|
|
35
|
-
Add the widget to any HTML page:
|
|
36
|
-
|
|
37
31
|
```html
|
|
38
32
|
<!DOCTYPE html>
|
|
39
33
|
<html>
|
|
@@ -41,99 +35,109 @@ Add the widget to any HTML page:
|
|
|
41
35
|
<title>My Website</title>
|
|
42
36
|
</head>
|
|
43
37
|
<body>
|
|
44
|
-
<h1>Welcome
|
|
38
|
+
<h1>Welcome</h1>
|
|
45
39
|
|
|
46
|
-
<!-- Add the widget custom element -->
|
|
47
40
|
<eka-medassist-widget agent-id="your-agent-id-here"></eka-medassist-widget>
|
|
48
41
|
|
|
49
|
-
|
|
50
|
-
<script src="https://your-cdn.com/widget-embed/index.js" async></script>
|
|
42
|
+
<script src="https://cdn.jsdelivr.net/npm/@eka-care/medassist-widget-embed@latest/dist/index.js" async></script>
|
|
51
43
|
</body>
|
|
52
44
|
</html>
|
|
53
45
|
```
|
|
54
46
|
|
|
55
|
-
|
|
47
|
+
The widget appears as a floating button; clicking it loads and opens the chat.
|
|
56
48
|
|
|
57
49
|
## Configuration
|
|
58
50
|
|
|
59
|
-
### Required
|
|
51
|
+
### Required attributes
|
|
52
|
+
|
|
53
|
+
- **`agent-id`** – Your MedAssist agent identifier
|
|
54
|
+
|
|
55
|
+
### Optional attributes
|
|
56
|
+
|
|
57
|
+
- **`icon-url`** – Custom icon URL for the widget button (default: Eka CDN icon)
|
|
58
|
+
- **`title`** – Widget title
|
|
59
|
+
- **`base-url`** – Base URL for API/agent config
|
|
60
|
+
- **`display-mode`** – `"widget"` (floating button) or `"full"` (inline full view)
|
|
61
|
+
- **`context`** – JSON string of context key-value pairs
|
|
60
62
|
|
|
61
|
-
|
|
63
|
+
### Programmatic config with `EkaMedAssist.init()`
|
|
62
64
|
|
|
63
|
-
|
|
65
|
+
After the script loads, you can set or override config before the user opens the widget:
|
|
64
66
|
|
|
65
|
-
|
|
67
|
+
```javascript
|
|
68
|
+
window.EkaMedAssist.init({
|
|
69
|
+
agentId: "your-agent-id",
|
|
70
|
+
title: "MedAssist",
|
|
71
|
+
iconUrl: "https://example.com/icon.svg",
|
|
72
|
+
baseUrl: "https://api.example.com",
|
|
73
|
+
context: { key: "value" },
|
|
74
|
+
theme: {
|
|
75
|
+
background: "#1a1738",
|
|
76
|
+
primary: "#09FBD3",
|
|
77
|
+
textColor: "white",
|
|
78
|
+
},
|
|
79
|
+
});
|
|
80
|
+
```
|
|
66
81
|
|
|
67
|
-
###
|
|
82
|
+
### Custom icon example
|
|
68
83
|
|
|
69
84
|
```html
|
|
70
85
|
<eka-medassist-widget
|
|
71
|
-
agent-id="your-agent-id
|
|
86
|
+
agent-id="your-agent-id"
|
|
72
87
|
icon-url="https://example.com/custom-icon.svg"></eka-medassist-widget>
|
|
73
88
|
```
|
|
74
89
|
|
|
75
|
-
## How
|
|
90
|
+
## How it works
|
|
91
|
+
|
|
92
|
+
1. **Initial load** – The script registers the custom element `<eka-medassist-widget>`.
|
|
93
|
+
2. **Button** – The element shows a floating button (or full view if `display-mode="full"`).
|
|
94
|
+
3. **Lazy load** – On first open, the script fetches the widget JS and CSS (from the same origin or from `https://unpkg.com/@eka-care/medassist-widget@latest/dist/` by default).
|
|
95
|
+
4. **Isolation** – The widget runs inside Shadow DOM to avoid style and script conflicts.
|
|
96
|
+
|
|
97
|
+
To use your own widget assets (e.g. after building [@eka-care/medassist-widget](https://www.npmjs.com/package/@eka-care/medassist-widget)), host `medassist-widget.js` and `medassist-widget.css` and point the script via the `data-widget-assets` attribute:
|
|
76
98
|
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
4. **Isolation**: All widget code runs in a Shadow DOM, preventing style and script conflicts
|
|
99
|
+
```html
|
|
100
|
+
<script
|
|
101
|
+
src="/path/to/widget-embed/index.js"
|
|
102
|
+
data-widget-assets="/path/to/widget-assets/"
|
|
103
|
+
async></script>
|
|
104
|
+
```
|
|
84
105
|
|
|
85
|
-
## File
|
|
106
|
+
## File structure
|
|
86
107
|
|
|
87
108
|
```
|
|
88
109
|
widget-embed/
|
|
89
|
-
├──
|
|
90
|
-
├──
|
|
91
|
-
│ ├──
|
|
92
|
-
│ └──
|
|
110
|
+
├── dist/
|
|
111
|
+
│ ├── index.js # Loader and custom element
|
|
112
|
+
│ ├── iframe.js # Optional iframe helper
|
|
113
|
+
│ └── iframe.html # Optional iframe template
|
|
93
114
|
├── assets/
|
|
94
|
-
│ └── bot-icon.svg
|
|
95
|
-
└──
|
|
115
|
+
│ └── bot-icon.svg # Default button icon (or CDN)
|
|
116
|
+
└── README.md
|
|
96
117
|
```
|
|
97
118
|
|
|
98
|
-
##
|
|
99
|
-
|
|
100
|
-
### Custom Icon
|
|
101
|
-
|
|
102
|
-
You can customize the widget button icon by setting the `icon-url` attribute:
|
|
119
|
+
## Browser support
|
|
103
120
|
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
agent-id="your-agent-id"
|
|
107
|
-
icon-url="/path/to/your-icon.svg"></eka-medassist-widget>
|
|
108
|
-
```
|
|
121
|
+
- Chrome, Firefox, Safari, Edge (latest)
|
|
122
|
+
- Requires Custom Elements, Shadow DOM, and ES6+
|
|
109
123
|
|
|
110
|
-
|
|
124
|
+
## Development
|
|
111
125
|
|
|
112
|
-
|
|
126
|
+
Build the package:
|
|
113
127
|
|
|
114
|
-
```
|
|
115
|
-
|
|
116
|
-
widget.setAttribute("icon-url", "https://example.com/new-icon.svg");
|
|
128
|
+
```bash
|
|
129
|
+
npm run build
|
|
117
130
|
```
|
|
118
131
|
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
- Chrome (latest)
|
|
122
|
-
- Firefox (latest)
|
|
123
|
-
- Safari (latest)
|
|
124
|
-
- Edge (latest)
|
|
125
|
-
|
|
126
|
-
Requires support for:
|
|
132
|
+
To build and bundle the widget assets locally:
|
|
127
133
|
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
## Development
|
|
134
|
+
```bash
|
|
135
|
+
npm run build:with-widget
|
|
136
|
+
```
|
|
133
137
|
|
|
134
|
-
|
|
138
|
+
(Requires the widget package to be built first.)
|
|
135
139
|
|
|
136
|
-
## Integration
|
|
140
|
+
## Integration examples
|
|
137
141
|
|
|
138
142
|
### React
|
|
139
143
|
|
|
@@ -142,20 +146,15 @@ import { useEffect } from "react";
|
|
|
142
146
|
|
|
143
147
|
function App() {
|
|
144
148
|
useEffect(() => {
|
|
145
|
-
// Load the widget script
|
|
146
149
|
const script = document.createElement("script");
|
|
147
|
-
script.src = "https://
|
|
150
|
+
script.src = "https://cdn.jsdelivr.net/npm/@eka-care/medassist-widget-embed@latest/dist/index.js";
|
|
148
151
|
script.async = true;
|
|
149
152
|
document.body.appendChild(script);
|
|
150
|
-
|
|
151
|
-
return () => {
|
|
152
|
-
// Cleanup if needed
|
|
153
|
-
};
|
|
154
153
|
}, []);
|
|
155
154
|
|
|
156
155
|
return (
|
|
157
156
|
<div>
|
|
158
|
-
<h1>My
|
|
157
|
+
<h1>My App</h1>
|
|
159
158
|
<eka-medassist-widget agent-id="your-agent-id" />
|
|
160
159
|
</div>
|
|
161
160
|
);
|
|
@@ -167,21 +166,16 @@ function App() {
|
|
|
167
166
|
```vue
|
|
168
167
|
<template>
|
|
169
168
|
<div>
|
|
170
|
-
<h1>My Vue App</h1>
|
|
171
169
|
<eka-medassist-widget :agent-id="agentId" />
|
|
172
170
|
</div>
|
|
173
171
|
</template>
|
|
174
172
|
|
|
175
173
|
<script>
|
|
176
174
|
export default {
|
|
177
|
-
data() {
|
|
178
|
-
return {
|
|
179
|
-
agentId: "your-agent-id",
|
|
180
|
-
};
|
|
181
|
-
},
|
|
175
|
+
data: () => ({ agentId: "your-agent-id" }),
|
|
182
176
|
mounted() {
|
|
183
177
|
const script = document.createElement("script");
|
|
184
|
-
script.src = "https://
|
|
178
|
+
script.src = "https://cdn.jsdelivr.net/npm/@eka-care/medassist-widget-embed@latest/dist/index.js";
|
|
185
179
|
script.async = true;
|
|
186
180
|
document.body.appendChild(script);
|
|
187
181
|
},
|
|
@@ -189,45 +183,10 @@ export default {
|
|
|
189
183
|
</script>
|
|
190
184
|
```
|
|
191
185
|
|
|
192
|
-
### Vanilla JavaScript
|
|
193
|
-
|
|
194
|
-
```html
|
|
195
|
-
<!DOCTYPE html>
|
|
196
|
-
<html>
|
|
197
|
-
<head>
|
|
198
|
-
<title>My Site</title>
|
|
199
|
-
</head>
|
|
200
|
-
<body>
|
|
201
|
-
<eka-medassist-widget agent-id="your-agent-id"></eka-medassist-widget>
|
|
202
|
-
|
|
203
|
-
<script>
|
|
204
|
-
// Load widget script
|
|
205
|
-
(function () {
|
|
206
|
-
const script = document.createElement("script");
|
|
207
|
-
script.src = "https://your-cdn.com/widget-embed/index.js";
|
|
208
|
-
script.async = true;
|
|
209
|
-
document.body.appendChild(script);
|
|
210
|
-
})();
|
|
211
|
-
</script>
|
|
212
|
-
</body>
|
|
213
|
-
</html>
|
|
214
|
-
```
|
|
215
|
-
|
|
216
186
|
## Troubleshooting
|
|
217
187
|
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
1. Check that the `agent-id` attribute is set correctly
|
|
221
|
-
2. Verify that `index.js` is loading (check Network tab in DevTools)
|
|
222
|
-
3. Check browser console for errors
|
|
223
|
-
4. Ensure the widget assets (`medassist-widget.js` and `medassist-widget.css`) are accessible
|
|
224
|
-
|
|
225
|
-
### Styling Conflicts
|
|
226
|
-
|
|
227
|
-
The widget uses Shadow DOM to isolate styles, but if you encounter issues:
|
|
228
|
-
|
|
229
|
-
- Check that the widget is rendering inside the shadow DOM
|
|
230
|
-
- Verify that host website styles aren't affecting the shadow root
|
|
188
|
+
- **Widget not appearing** – Check `agent-id`, ensure the loader script loads (Network tab), and check the console for errors.
|
|
189
|
+
- **Assets 404** – If using self-hosted assets, ensure `medassist-widget.js` and `medassist-widget.css` are served at the path given in `data-widget-assets` (or use the default CDN).
|
|
231
190
|
|
|
232
191
|
## License
|
|
233
192
|
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";const getCurrentScript=()=>{if(typeof document=="undefined")return console.error("document is not defined"),null;const{currentScript:e}=document;if(e instanceof HTMLScriptElement)return e;const t=document.getElementsByTagName("script");return t.length?t[t.length-1]:null},getEnvironment=e=>{if(e==="production"||e==="development"||e==="staging")return e},scriptEl=getCurrentScript(),DEFAULT_WIDGET_ASSET_BASE=(()=>{var e;return!((e=scriptEl==null?void 0:scriptEl.src)===null||e===void 0)&&e.includes("@dev")?"https://unpkg.com/@eka-care/medassist-widget@dev/dist/":"https://unpkg.com/@eka-care/medassist-widget@latest/dist/"})();function mapAgentConfigThemeToWidgetTheme(e){if(!e)return;const t=e.mode==="dark"?"white":e.mode==="light"?"black":void 0;return{...e.background&&{background:e.background},...e.background_img&&{backgroundImage:e.background_img},...e.accent&&{primary:e.accent},...t&&{textColor:t},...e.title_img&&{titleImg:e.title_img}}}function preloadImage(e){if(!(!e||typeof document=="undefined"))try{const t=document.createElement("link");t.rel="preload",t.as="image",t.href=e,document.head.appendChild(t)}catch{const t=new Image;t.src=e}}async function fetchAgentConfig(e,t){const i=`${e.replace(/\/$/,"")}/med-assist/agent-config/${t}`,n=await fetch(i,{headers:{"ngrok-skip-browser-warning":"69420"}});if(!n.ok)return;const o=await n.json();if(o!=null&&o.success&&(o!=null&&o.data))return o.data}const globalMedAssistConfig={},getWidgetElement=()=>typeof document=="undefined"?null:document.querySelector("eka-medassist-widget");if(typeof window!="undefined"){const e=window;e.__ekaMedAssistConfig__=globalMedAssistConfig,e.EkaMedAssist={init(t){var i,n,o;Object.assign(globalMedAssistConfig,t);const d=getWidgetElement();if(d){if(t.agentId&&d.setAttribute("agent-id",t.agentId),t.title&&d.setAttribute("title",t.title),t.iconUrl&&d.setAttribute("icon-url",t.iconUrl),t.baseUrl&&d.setAttribute("base-url",t.baseUrl),t.context)try{d.setAttribute("context",JSON.stringify(t.context))}catch{console.warn("Failed to stringify context passed to init")}!((i=t.theme)===null||i===void 0)&&i.backgroundImage&&preloadImage(t.theme.backgroundImage),(o=(n=d).openFromBridge)===null||o===void 0||o.call(n)}}}}const scriptBaseUrl=(()=>{if(!scriptEl)return"";try{return new URL(".",scriptEl.src||window.location.href).href}catch{return""}})(),widgetAssetBaseUrl=(()=>{if(!scriptEl)return DEFAULT_WIDGET_ASSET_BASE;const e=scriptEl.dataset.widgetAssets;if(e==="local")return`${scriptBaseUrl}src/`;if(e&&e.length>0)try{return new URL(e,scriptBaseUrl).href}catch{return e.endsWith("/")?e:`${e}/`}return DEFAULT_WIDGET_ASSET_BASE})(),WIDGET_JS_URL=`${widgetAssetBaseUrl}medassist-widget.js`,WIDGET_CSS_URL=`${widgetAssetBaseUrl}medassist-widget.css`;let widgetScriptPromise=null,widgetCssTextPromise=null;function getWidgetCssTextPromise(){return widgetCssTextPromise||(widgetCssTextPromise=fetch(WIDGET_CSS_URL).then(e=>{if(!e.ok)throw new Error(`Unable to fetch widget styles from ${WIDGET_CSS_URL}`);return e.text()})),widgetCssTextPromise}class MedAssistWidgetLoader extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.defaultIconUrl="https://cdn.eka.care/bot-icon.svg",this.widgetLoaded=!1,this.displayMode=this.getAttribute("display-mode")==="full"?"full":"widget",this.setupAuthExpirationListener()}static get observedAttributes(){return["icon-url","display-mode"]}connectedCallback(){this.displayMode==="full"?this.initializeFullMode():(this.renderButton(),this.preloadWidgetAssets())}attributeChangedCallback(t){if(t==="icon-url"&&this.displayMode==="widget"&&this.renderButton(),t==="display-mode"){const i=this.getAttribute("display-mode")==="full"?"full":"widget";i!==this.displayMode&&(this.displayMode=i,i==="full"?this.initializeFullMode():this.renderButton())}}preloadWidgetAssets(){getWidgetCssTextPromise(),this.loadWidgetScript(),this.preloadBackgroundImage()}preloadBackgroundImage(){var t;const i=typeof window!="undefined"?window.__ekaMedAssistConfig__:void 0,n=this.getAttribute("theme")?(()=>{try{return JSON.parse(this.getAttribute("theme")||"{}")}catch{return}})():void 0,o=(t=i==null?void 0:i.theme)===null||t===void 0?void 0:t.backgroundImage,d=n==null?void 0:n.backgroundImage;o&&preloadImage(o),d&&d!==o&&preloadImage(d);const r=(i==null?void 0:i.baseUrl)||this.getAttribute("base-url")||"",a=(i==null?void 0:i.agentId)||this.getAttribute("agent-id")||"";r&&a&&fetchAgentConfig(r,a).then(u=>{var l;const g=(l=u==null?void 0:u.theme)===null||l===void 0?void 0:l.background_img;g&&preloadImage(g)}).catch(()=>{})}setupAuthExpirationListener(){if(typeof window=="undefined")return;const t=i=>{var n;((n=i.data)===null||n===void 0?void 0:n.type)==="AUTH_EXPIRED"&&window.parent!==window&&window.parent.postMessage({type:"AUTH_EXPIRED",message:"Authentication expired"},"*")};window.addEventListener("message",t)}openFromBridge(){this.displayMode=this.getAttribute("display-mode")==="full"?"full":"widget",this.displayMode==="full"?this.initializeFullMode():this.renderButton(),this.loadWidgetCss().then(()=>this.loadWidgetScript()).then(()=>this.loadAndRender()).catch(t=>{console.error("Failed to open MedAssist widget from bridge",t)})}renderButton(){var t;const i=this.getAttribute("icon-url")||this.defaultIconUrl,n=this.shadowRoot;if(!n){console.error("Shadow root was not created");return}if(!n.querySelector("button"))n.innerHTML=`
|
|
1
|
+
"use strict";const getCurrentScript=()=>{if(typeof document=="undefined")return console.error("document is not defined"),null;const{currentScript:e}=document;if(e instanceof HTMLScriptElement)return e;const t=document.getElementsByTagName("script");return t.length?t[t.length-1]:null},getEnvironment=e=>{if(e==="production"||e==="development"||e==="staging")return e},scriptEl=getCurrentScript(),DEFAULT_WIDGET_ASSET_BASE=(()=>{var e;return!((e=scriptEl==null?void 0:scriptEl.src)===null||e===void 0)&&e.includes("@dev")?"https://unpkg.com/@eka-care/medassist-widget@dev/dist/":"https://unpkg.com/@eka-care/medassist-widget@latest/dist/"})();function mapAgentConfigThemeToWidgetTheme(e){if(!e)return;const t=e.mode==="dark"?"white":e.mode==="light"?"black":void 0;return{...e.background&&{background:e.background},...e.background_img&&{backgroundImage:e.background_img},...e.accent&&{primary:e.accent},...t&&{textColor:t},...e.title_img&&{titleImg:e.title_img}}}function preloadImage(e){if(!(!e||typeof document=="undefined"))try{const t=document.createElement("link");t.rel="preload",t.as="image",t.href=e,document.head.appendChild(t)}catch{const t=new Image;t.src=e}}async function fetchAgentConfig(e,t){const i=`${e.replace(/\/$/,"")}/med-assist/agent-config/${t}`,n=await fetch(i,{headers:{"ngrok-skip-browser-warning":"69420"}});if(!n.ok)return;const o=await n.json();if(o!=null&&o.success&&(o!=null&&o.data))return o.data}const globalMedAssistConfig={},getWidgetElement=()=>typeof document=="undefined"?null:document.querySelector("eka-medassist-widget");if(typeof window!="undefined"){const e=window;e.__ekaMedAssistConfig__=globalMedAssistConfig,e.EkaMedAssist={init(t){var i,n,o;Object.assign(globalMedAssistConfig,t);const d=getWidgetElement();if(d){if(t.agentId&&d.setAttribute("agent-id",t.agentId),t.title&&d.setAttribute("title",t.title),t.iconUrl&&d.setAttribute("icon-url",t.iconUrl),t.baseUrl&&d.setAttribute("base-url",t.baseUrl),t.context)try{d.setAttribute("context",JSON.stringify(t.context))}catch{console.warn("Failed to stringify context passed to init")}!((i=t.theme)===null||i===void 0)&&i.backgroundImage&&preloadImage(t.theme.backgroundImage),(o=(n=d).openFromBridge)===null||o===void 0||o.call(n)}}}}const scriptBaseUrl=(()=>{if(!scriptEl)return"";try{return new URL(".",scriptEl.src||window.location.href).href}catch{return""}})(),widgetAssetBaseUrl=(()=>{if(!scriptEl)return DEFAULT_WIDGET_ASSET_BASE;const e=scriptEl.dataset.widgetAssets;if(e==="local")return`${scriptBaseUrl}src/`;if(e&&e.length>0)try{return new URL(e,scriptBaseUrl).href}catch{return e.endsWith("/")?e:`${e}/`}return DEFAULT_WIDGET_ASSET_BASE})(),WIDGET_JS_URL=`${widgetAssetBaseUrl}medassist-widget.js`,WIDGET_CSS_URL=`${widgetAssetBaseUrl}medassist-widget.css`;let widgetScriptPromise=null,widgetCssTextPromise=null;function getWidgetCssTextPromise(){return widgetCssTextPromise||(widgetCssTextPromise=fetch(WIDGET_CSS_URL).then(e=>{if(!e.ok)throw new Error(`Unable to fetch widget styles from ${WIDGET_CSS_URL}`);return e.text()})),widgetCssTextPromise}class MedAssistWidgetLoader extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.defaultIconUrl="https://cdn.eka.care/bot-icon.svg",this.widgetLoaded=!1,this.displayMode=this.getAttribute("display-mode")==="full"?"full":"widget",this.setupAuthExpirationListener()}static get observedAttributes(){return["icon-url","display-mode"]}connectedCallback(){this.displayMode==="full"?(this.initializeFullMode(),this.loadWidgetCss().then(()=>this.loadWidgetScript()).then(()=>this.loadAndRender()).catch(t=>{console.error("Failed to load MedAssist widget in full mode",t)})):(this.renderButton(),this.preloadWidgetAssets())}attributeChangedCallback(t){if(t==="icon-url"&&this.displayMode==="widget"&&this.renderButton(),t==="display-mode"){const i=this.getAttribute("display-mode")==="full"?"full":"widget";i!==this.displayMode&&(this.displayMode=i,i==="full"?this.initializeFullMode():this.renderButton())}}preloadWidgetAssets(){getWidgetCssTextPromise(),this.loadWidgetScript(),this.preloadBackgroundImage()}preloadBackgroundImage(){var t;const i=typeof window!="undefined"?window.__ekaMedAssistConfig__:void 0,n=this.getAttribute("theme")?(()=>{try{return JSON.parse(this.getAttribute("theme")||"{}")}catch{return}})():void 0,o=(t=i==null?void 0:i.theme)===null||t===void 0?void 0:t.backgroundImage,d=n==null?void 0:n.backgroundImage;o&&preloadImage(o),d&&d!==o&&preloadImage(d);const r=(i==null?void 0:i.baseUrl)||this.getAttribute("base-url")||"",a=(i==null?void 0:i.agentId)||this.getAttribute("agent-id")||"";r&&a&&fetchAgentConfig(r,a).then(u=>{var l;const g=(l=u==null?void 0:u.theme)===null||l===void 0?void 0:l.background_img;g&&preloadImage(g)}).catch(()=>{})}setupAuthExpirationListener(){if(typeof window=="undefined")return;const t=i=>{var n;((n=i.data)===null||n===void 0?void 0:n.type)==="AUTH_EXPIRED"&&window.parent!==window&&window.parent.postMessage({type:"AUTH_EXPIRED",message:"Authentication expired"},"*")};window.addEventListener("message",t)}openFromBridge(){this.displayMode=this.getAttribute("display-mode")==="full"?"full":"widget",this.displayMode==="full"?this.initializeFullMode():this.renderButton(),this.loadWidgetCss().then(()=>this.loadWidgetScript()).then(()=>this.loadAndRender()).catch(t=>{console.error("Failed to open MedAssist widget from bridge",t)})}renderButton(){var t;const i=this.getAttribute("icon-url")||this.defaultIconUrl,n=this.shadowRoot;if(!n){console.error("Shadow root was not created");return}if(!n.querySelector("button"))n.innerHTML=`
|
|
2
2
|
<style>
|
|
3
3
|
#medassist-open-btn {
|
|
4
4
|
width: 60px;
|