obi-sdk 0.3.6 → 0.3.8
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-d6306b0d.js} +52 -41
- package/dist/modular/chunks/{obi-widget-83402e4d.js.map → obi-widget-d6306b0d.js.map} +1 -1
- package/dist/modular/index.js +1 -1
- package/dist/modular/ui.js +10 -10
- package/dist/obi-sdk.es.js +1340 -1333
- 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();
|
|
@@ -10679,7 +10670,6 @@ class ObiWidget extends i$1 {
|
|
|
10679
10670
|
this.roomUrl = null;
|
|
10680
10671
|
this.boundSaveSessionData = null;
|
|
10681
10672
|
this.closeNavTimeoutRef = null;
|
|
10682
|
-
this.updateFromConfig();
|
|
10683
10673
|
const handleUnload = () => {
|
|
10684
10674
|
if (this.activeSession && this.sessionToken && this.roomToken && this.roomUrl) {
|
|
10685
10675
|
this.saveSessionData();
|
|
@@ -10697,8 +10687,15 @@ class ObiWidget extends i$1 {
|
|
|
10697
10687
|
if (window.obiWidgetConfig.isActive !== void 0) {
|
|
10698
10688
|
this.isActive = window.obiWidgetConfig.isActive;
|
|
10699
10689
|
}
|
|
10690
|
+
this.style.setProperty("--obi-primary", window.obiWidgetConfig?.primaryColor || "#9500ff");
|
|
10691
|
+
this.style.setProperty("--obi-secondary", window.obiWidgetConfig?.secondaryColor || "#c4b5fd");
|
|
10700
10692
|
}
|
|
10701
10693
|
}
|
|
10694
|
+
removeSessionFromUrl() {
|
|
10695
|
+
const url = new URL(window.location.href);
|
|
10696
|
+
url.searchParams.delete(SESSION_URL_PARAM);
|
|
10697
|
+
window.history.replaceState({}, "", url.toString());
|
|
10698
|
+
}
|
|
10702
10699
|
async connectObi(sessionToken) {
|
|
10703
10700
|
if (this.activeSession) {
|
|
10704
10701
|
console.log("Connection already exists");
|
|
@@ -10713,6 +10710,7 @@ class ObiWidget extends i$1 {
|
|
|
10713
10710
|
console.error("Failed to create session");
|
|
10714
10711
|
this.state = SDKState.ERROR;
|
|
10715
10712
|
this.activeSession = null;
|
|
10713
|
+
this.removeSessionFromUrl();
|
|
10716
10714
|
return;
|
|
10717
10715
|
}
|
|
10718
10716
|
session.on("stateChanged", (newState) => {
|
|
@@ -10742,18 +10740,21 @@ class ObiWidget extends i$1 {
|
|
|
10742
10740
|
console.error("Session error:", error);
|
|
10743
10741
|
this.state = SDKState.ERROR;
|
|
10744
10742
|
this.activeSession = null;
|
|
10743
|
+
this.removeSessionFromUrl();
|
|
10745
10744
|
});
|
|
10746
10745
|
const connectionInfo = await session.connect();
|
|
10747
10746
|
if (connectionInfo) {
|
|
10748
10747
|
this.sessionToken = sessionToken;
|
|
10749
10748
|
this.roomToken = connectionInfo.token;
|
|
10750
10749
|
this.roomUrl = connectionInfo.url;
|
|
10750
|
+
this.removeSessionFromUrl();
|
|
10751
10751
|
}
|
|
10752
10752
|
this.activeSession = session;
|
|
10753
10753
|
} catch (error) {
|
|
10754
10754
|
console.error("Failed to start session:", error);
|
|
10755
10755
|
this.state = SDKState.ERROR;
|
|
10756
10756
|
this.activeSession = null;
|
|
10757
|
+
this.removeSessionFromUrl();
|
|
10757
10758
|
}
|
|
10758
10759
|
}
|
|
10759
10760
|
async handleSessionStart(sessionToken) {
|
|
@@ -10834,15 +10835,6 @@ class ObiWidget extends i$1 {
|
|
|
10834
10835
|
clearSessionStorage() {
|
|
10835
10836
|
storage.removeItem(STORAGE_KEYS.SESSION_DATA);
|
|
10836
10837
|
}
|
|
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
10838
|
// Method to save session data
|
|
10847
10839
|
saveSessionData() {
|
|
10848
10840
|
if (!this.activeSession)
|
|
@@ -10860,6 +10852,25 @@ class ObiWidget extends i$1 {
|
|
|
10860
10852
|
storage.setItem(STORAGE_KEYS.SESSION_DATA, JSON.stringify(sessionData));
|
|
10861
10853
|
}
|
|
10862
10854
|
}
|
|
10855
|
+
async sessionConnectionCheck() {
|
|
10856
|
+
await this.checkExistingSession();
|
|
10857
|
+
if (!this.activeSession) {
|
|
10858
|
+
const urlParams = new URLSearchParams(window.location.search);
|
|
10859
|
+
const sessionId = urlParams.get(SESSION_URL_PARAM);
|
|
10860
|
+
if (sessionId) {
|
|
10861
|
+
this.handleSessionStart(sessionId);
|
|
10862
|
+
}
|
|
10863
|
+
}
|
|
10864
|
+
}
|
|
10865
|
+
connectedCallback() {
|
|
10866
|
+
super.connectedCallback();
|
|
10867
|
+
this.updateFromConfig();
|
|
10868
|
+
this.setAttribute("position", this.position);
|
|
10869
|
+
this.boundSaveSessionData = this.saveSessionData.bind(this);
|
|
10870
|
+
window.addEventListener("beforeunload", this.boundSaveSessionData);
|
|
10871
|
+
window.addEventListener("pagehide", this.boundSaveSessionData);
|
|
10872
|
+
this.sessionConnectionCheck();
|
|
10873
|
+
}
|
|
10863
10874
|
disconnectedCallback() {
|
|
10864
10875
|
if (this.closeNavTimeoutRef !== null) {
|
|
10865
10876
|
window.clearTimeout(this.closeNavTimeoutRef);
|
|
@@ -10868,6 +10879,7 @@ class ObiWidget extends i$1 {
|
|
|
10868
10879
|
window.removeEventListener("beforeunload", this.boundSaveSessionData);
|
|
10869
10880
|
window.removeEventListener("pagehide", this.boundSaveSessionData);
|
|
10870
10881
|
}
|
|
10882
|
+
this.removeSessionFromUrl();
|
|
10871
10883
|
super.disconnectedCallback();
|
|
10872
10884
|
}
|
|
10873
10885
|
handleMouseEnter() {
|
|
@@ -10917,7 +10929,6 @@ class ObiWidget extends i$1 {
|
|
|
10917
10929
|
});
|
|
10918
10930
|
}
|
|
10919
10931
|
render() {
|
|
10920
|
-
this.updateFromConfig();
|
|
10921
10932
|
if (!this.isActive)
|
|
10922
10933
|
return E;
|
|
10923
10934
|
const stateRender = z$2(this.state).with(SDKState.LOADING, () => x`<obi-dot-loader></obi-dot-loader>`).with(SDKState.RESEARCHING, () => x`<obi-searching-loader></obi-searching-loader>`).with(
|
|
@@ -10955,9 +10966,9 @@ ObiWidget.styles = i$4`
|
|
|
10955
10966
|
position: fixed;
|
|
10956
10967
|
z-index: 9999;
|
|
10957
10968
|
font-family: "Inter", sans-serif;
|
|
10958
|
-
--obi-primary: #
|
|
10969
|
+
--obi-primary: #9500ff;
|
|
10970
|
+
--obi-secondary: #c4b5fd;
|
|
10959
10971
|
--obi-danger: #ef4444;
|
|
10960
|
-
--obi-gray: #6b7280;
|
|
10961
10972
|
}
|
|
10962
10973
|
|
|
10963
10974
|
h1 {
|
|
@@ -11038,8 +11049,8 @@ ObiWidget.styles = i$4`
|
|
|
11038
11049
|
|
|
11039
11050
|
.widget-container.user-speaking {
|
|
11040
11051
|
background:
|
|
11041
|
-
linear-gradient(0deg,
|
|
11042
|
-
linear-gradient(195.84deg,
|
|
11052
|
+
linear-gradient(0deg, var(--obi-secondary), var(--obi-secondary)),
|
|
11053
|
+
linear-gradient(195.84deg, var(--obi-secondary) 00 11.05%, var(--obi-secondary) 117.01%);
|
|
11043
11054
|
}
|
|
11044
11055
|
|
|
11045
11056
|
.widget-container:hover {
|
|
@@ -11051,7 +11062,7 @@ ObiWidget.styles = i$4`
|
|
|
11051
11062
|
}
|
|
11052
11063
|
|
|
11053
11064
|
.widget-container.researching {
|
|
11054
|
-
width:
|
|
11065
|
+
width: 273px;
|
|
11055
11066
|
border-radius: 12px;
|
|
11056
11067
|
}
|
|
11057
11068
|
|
|
@@ -11062,18 +11073,18 @@ ObiWidget.styles = i$4`
|
|
|
11062
11073
|
}
|
|
11063
11074
|
|
|
11064
11075
|
.widget-container.rounded .widget-icon {
|
|
11065
|
-
transform: rotate(
|
|
11076
|
+
transform: rotate(90deg);
|
|
11066
11077
|
}
|
|
11067
11078
|
|
|
11068
11079
|
@keyframes pulse-shadow {
|
|
11069
11080
|
0% {
|
|
11070
|
-
box-shadow: 0 0 0 0
|
|
11081
|
+
box-shadow: 0 0 0 0 color-mix(in srgb, var(--obi-primary) 40%, transparent);
|
|
11071
11082
|
}
|
|
11072
11083
|
70% {
|
|
11073
|
-
box-shadow: 0 0 0 10px
|
|
11084
|
+
box-shadow: 0 0 0 10px color-mix(in srgb, var(--obi-primary) 0%, transparent);
|
|
11074
11085
|
}
|
|
11075
11086
|
100% {
|
|
11076
|
-
box-shadow: 0 0 0 0
|
|
11087
|
+
box-shadow: 0 0 0 0 color-mix(in srgb, var(--obi-primary) 0%, transparent);
|
|
11077
11088
|
}
|
|
11078
11089
|
}
|
|
11079
11090
|
|
|
@@ -11144,4 +11155,4 @@ export {
|
|
|
11144
11155
|
searchingLoader as s,
|
|
11145
11156
|
x
|
|
11146
11157
|
};
|
|
11147
|
-
//# sourceMappingURL=obi-widget-
|
|
11158
|
+
//# sourceMappingURL=obi-widget-d6306b0d.js.map
|