obi-sdk 0.3.5 → 0.3.7
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 +14 -63
- package/dist/modular/chunks/{obi-widget-83402e4d.js → obi-widget-7060085d.js} +52 -39
- package/dist/modular/chunks/{obi-widget-83402e4d.js.map → obi-widget-7060085d.js.map} +1 -1
- package/dist/modular/index.js +1 -1
- package/dist/modular/ui.js +10 -10
- package/dist/obi-sdk.es.js +1338 -1331
- package/dist/obi-sdk.standalone.iife.js +18 -18
- package/dist/obi-sdk.standalone.iife.js.map +1 -1
- package/dist/obi-sdk.umd.js +46 -58
- package/dist/ui/components/obi-widget.d.ts +3 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -15,69 +15,20 @@ A JavaScript SDK with dynamic content capabilities for integrating Obi into your
|
|
|
15
15
|
|
|
16
16
|
The loader accepts the following configuration options:
|
|
17
17
|
|
|
18
|
-
| Option
|
|
19
|
-
|
|
|
20
|
-
| `position`
|
|
21
|
-
| `apiKey`
|
|
22
|
-
| `user`
|
|
23
|
-
| `isActive`
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
2. Add it to your HTML page
|
|
33
|
-
3. Configure the widget using `window.obiWidgetConfig`
|
|
34
|
-
|
|
35
|
-
**Example HTML structure:**
|
|
36
|
-
|
|
37
|
-
<!DOCTYPE html>
|
|
38
|
-
<html>
|
|
39
|
-
<head>
|
|
40
|
-
<title>My Website with Obi</title>
|
|
41
|
-
<script>
|
|
42
|
-
// Configure Obi
|
|
43
|
-
window.obiWidgetConfig = {
|
|
44
|
-
position: "bottom-right",
|
|
45
|
-
apiKey: "YOUR_API_KEY",
|
|
46
|
-
isActive: true,
|
|
47
|
-
user: {
|
|
48
|
-
id: "user-123",
|
|
49
|
-
email: "user@example.com",
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
</script>
|
|
53
|
-
</head>
|
|
54
|
-
<body>
|
|
55
|
-
<!-- Your website content -->
|
|
56
|
-
<script>
|
|
57
|
-
(()=>{var t,e,n=window,o=document,s=n.ObiSDK;"function"==typeof s||"object"==typeof s?s("update",n.obiWidgetConfig):((t=function(){t.q.push(arguments)}).q=[],n.ObiSDK=t,e=function(t){var e=o.createElement("script"),t=(e.type="text/javascript",e.async=!0,e.src="https://unpkg.com/obi-sdk@"+(t||"latest")+"/dist/obi-sdk.standalone.iife.js",o.getElementsByTagName("script")[0]);t.parentNode.insertBefore(e,t)},s=function(){try{var t=new XMLHttpRequest;t.open("GET","https://registry.npmjs.org/obi-sdk/latest"),t.onload=function(){if(200===t.status)try{e(JSON.parse(t.responseText).version)}catch(t){e()}else e()},t.onerror=function(){e()},t.send()}catch(t){e()}},"complete"===o.readyState?s():n.attachEvent?n.attachEvent("onload",s):n.addEventListener("load",s,!1))})();
|
|
58
|
-
</script>
|
|
59
|
-
</body>
|
|
60
|
-
</html>
|
|
61
|
-
|
|
62
|
-
The widget will automatically appear in the specified position on your page.
|
|
63
|
-
|
|
64
|
-
### Using a CDN Link
|
|
65
|
-
|
|
66
|
-
You can also include the loader directly from our CDN:
|
|
67
|
-
|
|
68
|
-
```html
|
|
69
|
-
<!-- Configure the widget (optional) -->
|
|
70
|
-
<script>
|
|
71
|
-
window.obiWidgetConfig = {
|
|
72
|
-
position: "bottom-right",
|
|
73
|
-
apiKey: "YOUR_API_KEY",
|
|
74
|
-
isActive: true,
|
|
75
|
-
}
|
|
76
|
-
</script>
|
|
77
|
-
|
|
78
|
-
<!-- Load the widget using the separate loader script -->
|
|
79
|
-
<script src="https://unpkg.com/obi-sdk@latest/dist/obi-loader.iife.js"></script>
|
|
80
|
-
```
|
|
18
|
+
| Option | Type | Default | Description |
|
|
19
|
+
| ---------------- | ------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
20
|
+
| `position` | string | `'bottom-right'` | Position of the widget on the page. Options: `'bottom-right'`, `'bottom-left'`, `'bottom-center'`, `'top-right'`, `'top-left'`, `'top-center'`, `'middle-left'`, `'middle-right'` |
|
|
21
|
+
| `apiKey` | string | - | Your Obi API key (required for production) |
|
|
22
|
+
| `user` | object | - | User information with `id` (required), `email` (optional) and `metadata` (optional) |
|
|
23
|
+
| `isActive` | boolean | `true` | Whether to show the widget. Set to `false` to disable the widget for specific users |
|
|
24
|
+
| `primaryColor` | string | - | Custom primary color for the widget UI (CSS color value) |
|
|
25
|
+
| `secondaryColor` | string | - | Custom secondary color for the widget UI (CSS color value) |
|
|
26
|
+
|
|
27
|
+
## Installation
|
|
28
|
+
|
|
29
|
+
For installation instructions, we recommend using the **obi-loader** package. This package provides a lightweight loader that will automatically fetch and initialize the full and latest SDK.
|
|
30
|
+
|
|
31
|
+
Please visit the [obi-loader npm package](https://www.npmjs.com/package/obi-loader) for installation methods and documentation.
|
|
81
32
|
|
|
82
33
|
## Widget Positioning
|
|
83
34
|
|
|
@@ -9672,21 +9672,9 @@ const obiIcon = x`
|
|
|
9672
9672
|
<img
|
|
9673
9673
|
class="widget-icon"
|
|
9674
9674
|
src="data:image/svg+xml;base64,${btoa(`<?xml version="1.0" encoding="UTF-8"?>
|
|
9675
|
-
|
|
9676
|
-
|
|
9677
|
-
|
|
9678
|
-
<path d="M15.5845 9.29177L8.20527 5.00637L8.20527 13.4502L15.5845 17.7356L15.5845 9.29177Z" fill="white" />
|
|
9679
|
-
<path d="M15.5896 27.7146L8.21035 31.9994L8.21032 23.4698L15.5896 19.1843L15.5896 27.7146Z" fill="white" />
|
|
9680
|
-
<path d="M16.4104 27.7146L16.4104 19.1786L23.7897 23.4641L23.7897 32L16.4104 27.7146Z" fill="white" />
|
|
9681
|
-
<path d="M32 27.7142L24.6207 31.9996L24.6207 23.47L32 19.1846L32 27.7142Z" fill="white" />
|
|
9682
|
-
<path d="M24.2048 22.748L31.5911 18.4585L24.2845 14.2154L16.8983 18.5048L24.2048 22.748Z" fill="white" />
|
|
9683
|
-
<path d="M23.7948 5.01235L23.7948 13.4564L16.4156 17.7418L16.4156 9.29775L23.7948 5.01235Z" fill="white" />
|
|
9684
|
-
<path d="M16.0052 0L23.3865 4.2866L16.0003 8.57606L8.61897 4.28946L16.0052 0Z" fill="white" />
|
|
9685
|
-
<path d="M7.72042 14.2182L15.1017 18.5048L7.79445 22.7477L0.413699 18.4615L7.72042 14.2182Z" fill="white" />
|
|
9686
|
-
<path d="M7.37926 31.9997L7.37926 23.4638L0 19.1784L3.79636e-05 27.7143L7.37926 31.9997Z" fill="white" />
|
|
9687
|
-
</g>
|
|
9688
|
-
</g>
|
|
9689
|
-
</svg>`)}"
|
|
9675
|
+
<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
9676
|
+
<path d="M158.803 0L160.352 0.0399439C176.267 0.844061 188.922 13.9634 188.922 30.0311C188.922 46.6174 175.438 60.0653 158.803 60.0656H99.0263L98.9061 60.0722C78.8071 61.4795 62.6269 77.004 60.2644 96.7673L60.241 96.9704V158.93L60.2644 159.13C62.7406 179.86 80.4234 195.934 101.881 195.935H153.842C176.993 195.935 195.759 177.223 195.759 154.14V96.9138L195.799 95.3693C196.606 79.5009 209.766 66.8827 225.881 66.8827C242.515 66.8834 256 80.328 256 96.9138V159.086L255.963 160.564C255.225 175.748 243.176 187.971 228.038 189.038V189.214C207.121 190.591 190.4 207.263 189.019 228.119H188.842C187.738 243.7 174.712 256 158.803 256H96.4491C79.8147 256 66.3309 242.555 66.3302 225.969C66.3302 225.673 66.3349 225.375 66.3436 225.077H66.3503H66.3035C63.3344 206.008 47.4427 190.589 27.8321 189.231L27.8354 189.031C12.2702 187.868 0.000167669 174.905 0 159.086V96.9138L0.0367222 95.4192C0.791087 80.0787 13.0909 67.7634 28.453 66.9293C47.7697 65.3039 63.3522 50.3234 66.2969 31.4658L66.3469 31.1595L66.3369 30.85C66.3301 30.5933 66.3302 30.3238 66.3302 30.0311C66.3309 13.4454 79.8148 0.000165137 96.4491 0H158.803Z" fill="white"/>
|
|
9677
|
+
</svg>`)}"
|
|
9690
9678
|
alt="Obi Icon"
|
|
9691
9679
|
/>
|
|
9692
9680
|
`;
|
|
@@ -10033,7 +10021,7 @@ class CourseModal extends i$1 {
|
|
|
10033
10021
|
this.loading = true;
|
|
10034
10022
|
const raw_response = await fetch(`${this.apiBaseUrl}/sessions?token=${this.apiKey}`);
|
|
10035
10023
|
const response = await raw_response.json();
|
|
10036
|
-
const mappedCourses = response.map((session) => ({
|
|
10024
|
+
const mappedCourses = response.sessions?.sessions?.map((session) => ({
|
|
10037
10025
|
id: session.uuid,
|
|
10038
10026
|
name: session.onboarding_plan.name,
|
|
10039
10027
|
description: session.onboarding_plan.description,
|
|
@@ -10418,9 +10406,11 @@ class AudioEqualizer extends i$1 {
|
|
|
10418
10406
|
for (let i3 = 0; i3 < this.barCount; i3++) {
|
|
10419
10407
|
const spectrumValue = processedSpectrum.length > 0 ? processedSpectrum[i3] !== void 0 ? processedSpectrum[i3] : currentVolume : currentVolume;
|
|
10420
10408
|
if (this.volume.speaker === "USER") {
|
|
10421
|
-
|
|
10409
|
+
const opacity2 = Math.floor((spectrumValue * 0.5 + 0.5) * 255).toString(16).padStart(2, "0");
|
|
10410
|
+
ctx.fillStyle = `var(--obi-primary)${opacity2}`;
|
|
10422
10411
|
} else {
|
|
10423
|
-
|
|
10412
|
+
const opacity2 = Math.floor((spectrumValue * 0.5 + 0.5) * 255).toString(16).padStart(2, "0");
|
|
10413
|
+
ctx.fillStyle = `#FFFFFF${opacity2}`;
|
|
10424
10414
|
}
|
|
10425
10415
|
const barHeight = Math.max(2, spectrumValue * 0.8 * barMaxHeight);
|
|
10426
10416
|
const x2 = displayWidth - (this.barCount - i3) * (barWidth + gap);
|
|
@@ -10626,8 +10616,8 @@ SearchingLoader.styles = i$4`
|
|
|
10626
10616
|
:host {
|
|
10627
10617
|
display: flex;
|
|
10628
10618
|
align-items: center;
|
|
10629
|
-
gap:
|
|
10630
|
-
background-color:
|
|
10619
|
+
gap: 8px;
|
|
10620
|
+
background-color: var(--obi-primary);
|
|
10631
10621
|
border-radius: 12px;
|
|
10632
10622
|
padding: 8px 12px;
|
|
10633
10623
|
}
|
|
@@ -10656,6 +10646,7 @@ var __decorateClass = (decorators, target, key, kind) => {
|
|
|
10656
10646
|
__defProp(target, key, result);
|
|
10657
10647
|
return result;
|
|
10658
10648
|
};
|
|
10649
|
+
const SESSION_URL_PARAM = "49206C6F7665204F6269_session";
|
|
10659
10650
|
class ObiWidget extends i$1 {
|
|
10660
10651
|
constructor() {
|
|
10661
10652
|
super();
|
|
@@ -10697,8 +10688,15 @@ class ObiWidget extends i$1 {
|
|
|
10697
10688
|
if (window.obiWidgetConfig.isActive !== void 0) {
|
|
10698
10689
|
this.isActive = window.obiWidgetConfig.isActive;
|
|
10699
10690
|
}
|
|
10691
|
+
this.style.setProperty("--obi-primary", window.obiWidgetConfig?.primaryColor || "#9500ff");
|
|
10692
|
+
this.style.setProperty("--obi-secondary", window.obiWidgetConfig?.secondaryColor || "#c4b5fd");
|
|
10700
10693
|
}
|
|
10701
10694
|
}
|
|
10695
|
+
removeSessionFromUrl() {
|
|
10696
|
+
const url = new URL(window.location.href);
|
|
10697
|
+
url.searchParams.delete(SESSION_URL_PARAM);
|
|
10698
|
+
window.history.replaceState({}, "", url.toString());
|
|
10699
|
+
}
|
|
10702
10700
|
async connectObi(sessionToken) {
|
|
10703
10701
|
if (this.activeSession) {
|
|
10704
10702
|
console.log("Connection already exists");
|
|
@@ -10713,6 +10711,7 @@ class ObiWidget extends i$1 {
|
|
|
10713
10711
|
console.error("Failed to create session");
|
|
10714
10712
|
this.state = SDKState.ERROR;
|
|
10715
10713
|
this.activeSession = null;
|
|
10714
|
+
this.removeSessionFromUrl();
|
|
10716
10715
|
return;
|
|
10717
10716
|
}
|
|
10718
10717
|
session.on("stateChanged", (newState) => {
|
|
@@ -10742,18 +10741,21 @@ class ObiWidget extends i$1 {
|
|
|
10742
10741
|
console.error("Session error:", error);
|
|
10743
10742
|
this.state = SDKState.ERROR;
|
|
10744
10743
|
this.activeSession = null;
|
|
10744
|
+
this.removeSessionFromUrl();
|
|
10745
10745
|
});
|
|
10746
10746
|
const connectionInfo = await session.connect();
|
|
10747
10747
|
if (connectionInfo) {
|
|
10748
10748
|
this.sessionToken = sessionToken;
|
|
10749
10749
|
this.roomToken = connectionInfo.token;
|
|
10750
10750
|
this.roomUrl = connectionInfo.url;
|
|
10751
|
+
this.removeSessionFromUrl();
|
|
10751
10752
|
}
|
|
10752
10753
|
this.activeSession = session;
|
|
10753
10754
|
} catch (error) {
|
|
10754
10755
|
console.error("Failed to start session:", error);
|
|
10755
10756
|
this.state = SDKState.ERROR;
|
|
10756
10757
|
this.activeSession = null;
|
|
10758
|
+
this.removeSessionFromUrl();
|
|
10757
10759
|
}
|
|
10758
10760
|
}
|
|
10759
10761
|
async handleSessionStart(sessionToken) {
|
|
@@ -10834,15 +10836,6 @@ class ObiWidget extends i$1 {
|
|
|
10834
10836
|
clearSessionStorage() {
|
|
10835
10837
|
storage.removeItem(STORAGE_KEYS.SESSION_DATA);
|
|
10836
10838
|
}
|
|
10837
|
-
connectedCallback() {
|
|
10838
|
-
super.connectedCallback();
|
|
10839
|
-
this.updateFromConfig();
|
|
10840
|
-
this.setAttribute("position", this.position);
|
|
10841
|
-
this.boundSaveSessionData = this.saveSessionData.bind(this);
|
|
10842
|
-
window.addEventListener("beforeunload", this.boundSaveSessionData);
|
|
10843
|
-
window.addEventListener("pagehide", this.boundSaveSessionData);
|
|
10844
|
-
this.checkExistingSession();
|
|
10845
|
-
}
|
|
10846
10839
|
// Method to save session data
|
|
10847
10840
|
saveSessionData() {
|
|
10848
10841
|
if (!this.activeSession)
|
|
@@ -10860,6 +10853,25 @@ class ObiWidget extends i$1 {
|
|
|
10860
10853
|
storage.setItem(STORAGE_KEYS.SESSION_DATA, JSON.stringify(sessionData));
|
|
10861
10854
|
}
|
|
10862
10855
|
}
|
|
10856
|
+
async sessionConnectionCheck() {
|
|
10857
|
+
await this.checkExistingSession();
|
|
10858
|
+
if (!this.activeSession) {
|
|
10859
|
+
const urlParams = new URLSearchParams(window.location.search);
|
|
10860
|
+
const sessionId = urlParams.get(SESSION_URL_PARAM);
|
|
10861
|
+
if (sessionId) {
|
|
10862
|
+
this.handleSessionStart(sessionId);
|
|
10863
|
+
}
|
|
10864
|
+
}
|
|
10865
|
+
}
|
|
10866
|
+
connectedCallback() {
|
|
10867
|
+
super.connectedCallback();
|
|
10868
|
+
this.updateFromConfig();
|
|
10869
|
+
this.setAttribute("position", this.position);
|
|
10870
|
+
this.boundSaveSessionData = this.saveSessionData.bind(this);
|
|
10871
|
+
window.addEventListener("beforeunload", this.boundSaveSessionData);
|
|
10872
|
+
window.addEventListener("pagehide", this.boundSaveSessionData);
|
|
10873
|
+
this.sessionConnectionCheck();
|
|
10874
|
+
}
|
|
10863
10875
|
disconnectedCallback() {
|
|
10864
10876
|
if (this.closeNavTimeoutRef !== null) {
|
|
10865
10877
|
window.clearTimeout(this.closeNavTimeoutRef);
|
|
@@ -10868,6 +10880,7 @@ class ObiWidget extends i$1 {
|
|
|
10868
10880
|
window.removeEventListener("beforeunload", this.boundSaveSessionData);
|
|
10869
10881
|
window.removeEventListener("pagehide", this.boundSaveSessionData);
|
|
10870
10882
|
}
|
|
10883
|
+
this.removeSessionFromUrl();
|
|
10871
10884
|
super.disconnectedCallback();
|
|
10872
10885
|
}
|
|
10873
10886
|
handleMouseEnter() {
|
|
@@ -10955,9 +10968,9 @@ ObiWidget.styles = i$4`
|
|
|
10955
10968
|
position: fixed;
|
|
10956
10969
|
z-index: 9999;
|
|
10957
10970
|
font-family: "Inter", sans-serif;
|
|
10958
|
-
--obi-primary: #
|
|
10971
|
+
--obi-primary: #9500ff;
|
|
10972
|
+
--obi-secondary: #c4b5fd;
|
|
10959
10973
|
--obi-danger: #ef4444;
|
|
10960
|
-
--obi-gray: #6b7280;
|
|
10961
10974
|
}
|
|
10962
10975
|
|
|
10963
10976
|
h1 {
|
|
@@ -11038,8 +11051,8 @@ ObiWidget.styles = i$4`
|
|
|
11038
11051
|
|
|
11039
11052
|
.widget-container.user-speaking {
|
|
11040
11053
|
background:
|
|
11041
|
-
linear-gradient(0deg,
|
|
11042
|
-
linear-gradient(195.84deg,
|
|
11054
|
+
linear-gradient(0deg, var(--obi-secondary), var(--obi-secondary)),
|
|
11055
|
+
linear-gradient(195.84deg, var(--obi-secondary) 00 11.05%, var(--obi-secondary) 117.01%);
|
|
11043
11056
|
}
|
|
11044
11057
|
|
|
11045
11058
|
.widget-container:hover {
|
|
@@ -11051,7 +11064,7 @@ ObiWidget.styles = i$4`
|
|
|
11051
11064
|
}
|
|
11052
11065
|
|
|
11053
11066
|
.widget-container.researching {
|
|
11054
|
-
width:
|
|
11067
|
+
width: 273px;
|
|
11055
11068
|
border-radius: 12px;
|
|
11056
11069
|
}
|
|
11057
11070
|
|
|
@@ -11062,18 +11075,18 @@ ObiWidget.styles = i$4`
|
|
|
11062
11075
|
}
|
|
11063
11076
|
|
|
11064
11077
|
.widget-container.rounded .widget-icon {
|
|
11065
|
-
transform: rotate(
|
|
11078
|
+
transform: rotate(90deg);
|
|
11066
11079
|
}
|
|
11067
11080
|
|
|
11068
11081
|
@keyframes pulse-shadow {
|
|
11069
11082
|
0% {
|
|
11070
|
-
box-shadow: 0 0 0 0
|
|
11083
|
+
box-shadow: 0 0 0 0 color-mix(in srgb, var(--obi-primary) 40%, transparent);
|
|
11071
11084
|
}
|
|
11072
11085
|
70% {
|
|
11073
|
-
box-shadow: 0 0 0 10px
|
|
11086
|
+
box-shadow: 0 0 0 10px color-mix(in srgb, var(--obi-primary) 0%, transparent);
|
|
11074
11087
|
}
|
|
11075
11088
|
100% {
|
|
11076
|
-
box-shadow: 0 0 0 0
|
|
11089
|
+
box-shadow: 0 0 0 0 color-mix(in srgb, var(--obi-primary) 0%, transparent);
|
|
11077
11090
|
}
|
|
11078
11091
|
}
|
|
11079
11092
|
|
|
@@ -11144,4 +11157,4 @@ export {
|
|
|
11144
11157
|
searchingLoader as s,
|
|
11145
11158
|
x
|
|
11146
11159
|
};
|
|
11147
|
-
//# sourceMappingURL=obi-widget-
|
|
11160
|
+
//# sourceMappingURL=obi-widget-7060085d.js.map
|