obi-sdk 0.1.6 → 0.1.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 +33 -232
- package/dist/{index-e52b38be.js → index-d9a81606.js} +792 -750
- package/dist/modular/index.js +109 -51
- package/dist/modular/index.js.map +1 -1
- package/dist/obi-sdk.es.js +1 -1
- package/dist/obi-sdk.standalone.iife.js +2 -2
- package/dist/obi-sdk.standalone.iife.js.map +1 -1
- package/dist/obi-sdk.umd.js +40 -40
- package/dist/{session-33b71dff.js → session-c2549ff3.js} +1 -1
- package/index.d.ts +10 -5
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -4,16 +4,12 @@ A JavaScript SDK with dynamic content capabilities for integrating Obi into your
|
|
|
4
4
|
|
|
5
5
|
## Features
|
|
6
6
|
|
|
7
|
-
-
|
|
7
|
+
- Assistant interacts through voice and screen share
|
|
8
8
|
- DOM analysis allows the assistant to improve context
|
|
9
9
|
- Framework-agnostic UI components using Web Components
|
|
10
10
|
- Event-based API
|
|
11
11
|
- TypeScript support
|
|
12
12
|
|
|
13
|
-
## Installation
|
|
14
|
-
|
|
15
|
-
Currently, the recommended way to use Obi SDK is through the inline loader script approach.
|
|
16
|
-
|
|
17
13
|
## Configuration Options
|
|
18
14
|
|
|
19
15
|
The loader accepts the following configuration options:
|
|
@@ -25,170 +21,47 @@ The loader accepts the following configuration options:
|
|
|
25
21
|
| `autoInit` | boolean | `true` | Whether to initialize the widget automatically when loaded |
|
|
26
22
|
| `user` | object | - | User information with `id` (required), `email` (optional) and `metadata` (optional) |
|
|
27
23
|
|
|
28
|
-
##
|
|
24
|
+
## Installation Options
|
|
25
|
+
|
|
26
|
+
### Quick Start: Inline Loader
|
|
29
27
|
|
|
30
28
|
The simplest way to add Obi to your website is by using the inline loader script:
|
|
31
29
|
|
|
32
|
-
1. Copy the
|
|
30
|
+
1. Copy the formatted inline loader script from below
|
|
33
31
|
2. Add it to your HTML page
|
|
34
32
|
3. Configure the widget using `window.obiWidgetConfig`
|
|
35
33
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
<
|
|
40
|
-
<
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
apiKey: "YOUR_API_KEY",
|
|
46
|
-
user: {
|
|
47
|
-
id: "user-123",
|
|
48
|
-
email: "user@example.com",
|
|
49
|
-
},
|
|
50
|
-
}
|
|
51
|
-
</script>
|
|
52
|
-
</head>
|
|
53
|
-
<body>
|
|
54
|
-
<!-- Your website content -->
|
|
55
|
-
|
|
56
|
-
<!-- Add Obi widget loader script at the end of body -->
|
|
57
|
-
<script>
|
|
58
|
-
;(function (w, d) {
|
|
59
|
-
"use strict"
|
|
60
|
-
var c = {
|
|
34
|
+
**Example HTML structure:**
|
|
35
|
+
|
|
36
|
+
<!DOCTYPE html>
|
|
37
|
+
<html>
|
|
38
|
+
<head>
|
|
39
|
+
<title>My Website with Obi</title>
|
|
40
|
+
<script>
|
|
41
|
+
// Configure Obi
|
|
42
|
+
window.obiWidgetConfig = {
|
|
61
43
|
position: "bottom-right",
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
for (var k in c) !(k in f) && (f[k] = c[k])
|
|
68
|
-
if (typeof w.ObiSDK === "function" || typeof w.ObiSDK === "object") g(f)
|
|
69
|
-
else {
|
|
70
|
-
if (w.__obiSDKLoading) {
|
|
71
|
-
e(function () {
|
|
72
|
-
g(f)
|
|
73
|
-
})
|
|
74
|
-
return
|
|
75
|
-
}
|
|
76
|
-
m(function (v) {
|
|
77
|
-
j(v, function () {
|
|
78
|
-
w.__obiSDKLoading = !1
|
|
79
|
-
g(f)
|
|
80
|
-
})
|
|
81
|
-
})
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
function e(f) {
|
|
85
|
-
var t = w.setInterval(function () {
|
|
86
|
-
if (typeof w.ObiSDK === "function" || typeof w.ObiSDK === "object") {
|
|
87
|
-
w.clearInterval(t)
|
|
88
|
-
f()
|
|
89
|
-
}
|
|
90
|
-
}, 100)
|
|
44
|
+
apiKey: "YOUR_API_KEY",
|
|
45
|
+
user: {
|
|
46
|
+
id: "user-123",
|
|
47
|
+
email: "user@example.com",
|
|
48
|
+
},
|
|
91
49
|
}
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
} catch (e) {
|
|
102
|
-
cb(null)
|
|
103
|
-
}
|
|
104
|
-
} else {
|
|
105
|
-
cb(null)
|
|
106
|
-
}
|
|
107
|
-
}
|
|
108
|
-
x.onerror = function () {
|
|
109
|
-
cb(null)
|
|
110
|
-
}
|
|
111
|
-
x.send()
|
|
112
|
-
} catch (e) {
|
|
113
|
-
cb(null)
|
|
114
|
-
}
|
|
115
|
-
}
|
|
116
|
-
function j(v, cb) {
|
|
117
|
-
w.__obiSDKLoading = !0
|
|
118
|
-
var s = d.createElement("script")
|
|
119
|
-
s.type = "text/javascript"
|
|
120
|
-
s.async = !0
|
|
121
|
-
var b = "https://unpkg.com/obi-sdk"
|
|
122
|
-
var u = v || "latest"
|
|
123
|
-
s.src = b + "@" + u + "/dist/obi-sdk.standalone.iife.js"
|
|
124
|
-
s.onload = cb
|
|
125
|
-
s.onerror = function () {
|
|
126
|
-
if (u !== "latest") {
|
|
127
|
-
console.warn("Failed to load specific version, falling back to latest")
|
|
128
|
-
s.src = b + "@latest/dist/obi-sdk.standalone.iife.js"
|
|
129
|
-
s.onload = cb
|
|
130
|
-
} else {
|
|
131
|
-
w.__obiSDKLoading = !1
|
|
132
|
-
console.error("Failed to load Obi SDK")
|
|
133
|
-
}
|
|
134
|
-
}
|
|
135
|
-
var fs = d.getElementsByTagName("script")[0]
|
|
136
|
-
fs.parentNode.insertBefore(s, fs)
|
|
137
|
-
}
|
|
138
|
-
function g(f) {
|
|
139
|
-
if (d.querySelector("obi-widget")) {
|
|
140
|
-
w.console && w.console.log && w.console.log("Obi Widget already exists on the page")
|
|
141
|
-
return
|
|
142
|
-
}
|
|
143
|
-
if (!w.customElements || !w.customElements.get("obi-widget")) {
|
|
144
|
-
w.console &&
|
|
145
|
-
w.console.warn &&
|
|
146
|
-
w.console.warn(
|
|
147
|
-
"Obi Widget component not registered - SDK may not have loaded properly"
|
|
148
|
-
)
|
|
149
|
-
return
|
|
150
|
-
}
|
|
151
|
-
var t = d.createElement("obi-widget")
|
|
152
|
-
f.theme && t.setAttribute("theme", f.theme)
|
|
153
|
-
f.apiKey && t.setAttribute("api-key", f.apiKey)
|
|
154
|
-
t.setAttribute("api-base-url", "https://www.iamobi.ai/api/")
|
|
155
|
-
f.position && t.setAttribute("position", f.position)
|
|
156
|
-
f.user && t.setAttribute("user", JSON.stringify(f.user))
|
|
157
|
-
d.body.appendChild(t)
|
|
158
|
-
w.console && w.console.log && w.console.log("Obi Widget added to page")
|
|
159
|
-
}
|
|
160
|
-
if (w.obiWidgetConfig && w.obiWidgetConfig.autoInit === false) {
|
|
161
|
-
// Skip auto-initialization
|
|
162
|
-
console.log("Obi Widget auto-initialization disabled")
|
|
163
|
-
} else {
|
|
164
|
-
d.readyState === "complete"
|
|
165
|
-
? i()
|
|
166
|
-
: w.attachEvent
|
|
167
|
-
? w.attachEvent("onload", i)
|
|
168
|
-
: w.addEventListener("load", i, !1)
|
|
169
|
-
}
|
|
170
|
-
})(window, document)
|
|
171
|
-
</script>
|
|
172
|
-
</body>
|
|
173
|
-
</html>
|
|
174
|
-
```
|
|
50
|
+
</script>
|
|
51
|
+
</head>
|
|
52
|
+
<body>
|
|
53
|
+
<!-- Your website content -->
|
|
54
|
+
<script>
|
|
55
|
+
(()=>{var s=window,d=document,r={position:"bottom-right",autoInit:!0};function t(){var t,e,o,a=s.obiWidgetConfig||{};for(t in r)t in a||(a[t]=r[t]);if("function"==typeof s.ObiSDK||"object"==typeof s.ObiSDK)l(a);else if(s.__obiSDKLoading)e=function(){l(a)},o=s.setInterval(function(){"function"!=typeof s.ObiSDK&&"object"!=typeof s.ObiSDK||(s.clearInterval(o),e())},100);else{var i=function(t){var e,o,i,n;t=t,e=function(){s.__obiSDKLoading=!1,l(a)},s.__obiSDKLoading=!0,(o=d.createElement("script")).type="text/javascript",o.async=!0,o.src=(i="https://unpkg.com/obi-sdk")+"@"+(n=t||"latest")+"/dist/obi-sdk.standalone.iife.js",o.onload=e,o.onerror=function(){"latest"!==n?(console.warn("Failed to load specific version, falling back to latest"),o.src=i+"@latest/dist/obi-sdk.standalone.iife.js",o.onload=e):(s.__obiSDKLoading=!1,console.error("Failed to load Obi SDK"))},d.head.appendChild(o)};try{var n=new XMLHttpRequest;n.open("GET","https://registry.npmjs.org/obi-sdk/latest"),n.onload=function(){if(200===n.status)try{var t=JSON.parse(n.responseText);i(t.version)}catch(t){i(null)}else i(null)},n.onerror=function(){i(null)},n.send()}catch(t){i(null)}}}function l(t){var e;d.querySelector("obi-widget")?console.log("Obi Widget already exists on the page"):customElements.get("obi-widget")?(e=d.createElement("obi-widget"),t.apiKey&&e.setAttribute("api-key",t.apiKey),t.position&&e.setAttribute("position",t.position),t.user&&e.setAttribute("user",JSON.stringify(t.user)),d.body.appendChild(e),console.log("Obi Widget added to page")):console.warn("Obi Widget component not registered - SDK may not have loaded properly")}s.__obiSDKLoading=s.__obiSDKLoading||!1,s.obiWidgetConfig&&!1===s.obiWidgetConfig.autoInit?console.log("Obi Widget auto-initialization disabled"):"complete"===d.readyState?t():s.attachEvent?s.attachEvent("onload",t):s.addEventListener("load",t,!1)})();
|
|
56
|
+
</script>
|
|
57
|
+
</body>
|
|
58
|
+
</html>
|
|
175
59
|
|
|
176
60
|
The widget will automatically appear in the specified position on your page.
|
|
177
61
|
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
The loader script:
|
|
181
|
-
|
|
182
|
-
1. Dynamically checks for the latest version using the npm registry API
|
|
183
|
-
2. Loads the specific versioned SDK from unpkg.com for better browser caching
|
|
184
|
-
3. Creates and positions the `<obi-widget>` custom element on your page
|
|
185
|
-
4. Initializes the widget with your API key and configuration
|
|
62
|
+
### Using a CDN Link
|
|
186
63
|
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
The inline loader script shown above is already minified for production use. If you need to customize it or understand how it works, you can find the full, commented version in the source code (`src/loader-inline.js`).
|
|
190
|
-
|
|
191
|
-
The loader script is also available as a separate file that can be loaded directly:
|
|
64
|
+
You can also include the loader directly from our CDN:
|
|
192
65
|
|
|
193
66
|
```html
|
|
194
67
|
<!-- Configure the widget (optional) -->
|
|
@@ -203,7 +76,7 @@ The loader script is also available as a separate file that can be loaded direct
|
|
|
203
76
|
<script src="https://unpkg.com/obi-sdk@latest/dist/obi-loader.iife.js"></script>
|
|
204
77
|
```
|
|
205
78
|
|
|
206
|
-
|
|
79
|
+
### Installation for npm Projects
|
|
207
80
|
|
|
208
81
|
You can also install the SDK via npm:
|
|
209
82
|
|
|
@@ -211,20 +84,9 @@ You can also install the SDK via npm:
|
|
|
211
84
|
npm install obi-sdk
|
|
212
85
|
```
|
|
213
86
|
|
|
214
|
-
And import it in your application:
|
|
215
|
-
|
|
216
|
-
```javascript
|
|
217
|
-
import ObiSDK from "obi-sdk"
|
|
218
|
-
|
|
219
|
-
// Initialize the SDK
|
|
220
|
-
const sdk = new ObiSDK({
|
|
221
|
-
apiKey: "YOUR_API_KEY",
|
|
222
|
-
})
|
|
223
|
-
```
|
|
224
|
-
|
|
225
87
|
## Always Load the Latest SDK Version
|
|
226
88
|
|
|
227
|
-
The SDK includes a simple function to always load the latest version from the CDN, which can be useful for applications that need to ensure users always have the newest features
|
|
89
|
+
The SDK includes a simple function to always load the latest version from the CDN, which can be useful for applications that need to ensure users always have the newest features:
|
|
228
90
|
|
|
229
91
|
```tsx
|
|
230
92
|
import { initObi } from "obi-sdk"
|
|
@@ -256,64 +118,7 @@ useEffect(() => {
|
|
|
256
118
|
}, [])
|
|
257
119
|
```
|
|
258
120
|
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
1. Query the npm registry to find the latest published version
|
|
262
|
-
2. Load that specific version from unpkg.com
|
|
263
|
-
3. Fall back to the "latest" tag if the specific version fails to load
|
|
264
|
-
4. Initialize the Obi widget with your configuration
|
|
265
|
-
|
|
266
|
-
## Building the SDK
|
|
267
|
-
|
|
268
|
-
To build the SDK locally:
|
|
269
|
-
|
|
270
|
-
```bash
|
|
271
|
-
# Install dependencies
|
|
272
|
-
npm install
|
|
273
|
-
|
|
274
|
-
# Build all formats (UMD, ES, standalone IIFE, and loader)
|
|
275
|
-
npm run build:all
|
|
276
|
-
```
|
|
277
|
-
|
|
278
|
-
This generates the following in the `dist` directory:
|
|
279
|
-
|
|
280
|
-
- `obi-sdk.umd.js` - UMD format for CommonJS/AMD environments
|
|
281
|
-
- `obi-sdk.es.js` - ES Module format for modern bundlers
|
|
282
|
-
- `obi-sdk.standalone.iife.js` - IIFE format with all dependencies bundled
|
|
283
|
-
- `obi-loader.iife.js` - Standalone loader script
|
|
284
|
-
|
|
285
|
-
## Coming Soon
|
|
286
|
-
|
|
287
|
-
The following features are under development and will be available in future releases:
|
|
288
|
-
|
|
289
|
-
- React integration components
|
|
290
|
-
- Import-based usage
|
|
291
|
-
- Advanced SDK methods for voice and screen capture
|
|
292
|
-
|
|
293
|
-
## Documentation
|
|
294
|
-
|
|
295
|
-
### Inline Loader Script
|
|
296
|
-
|
|
297
|
-
The inline loader script provides a self-contained way to add the Obi Widget to any webpage:
|
|
298
|
-
|
|
299
|
-
1. It checks if there's a global configuration object (`window.obiWidgetConfig`)
|
|
300
|
-
2. It merges this with default configuration values
|
|
301
|
-
3. It queries the npm registry to get the latest version of the SDK
|
|
302
|
-
4. It loads the SDK from your CDN with the appropriate version
|
|
303
|
-
5. It creates the `<obi-widget>` element and positions it on the page
|
|
304
|
-
6. It configures the widget with the provided options
|
|
305
|
-
|
|
306
|
-
Before using in production, you can use unpkg.com as a CDN which automatically serves files from npm packages:
|
|
307
|
-
|
|
308
|
-
```js
|
|
309
|
-
// The loader automatically uses unpkg.com to load the package:
|
|
310
|
-
var b = "https://unpkg.com/obi-sdk"
|
|
311
|
-
|
|
312
|
-
// Which resolves to URLs like:
|
|
313
|
-
// https://unpkg.com/obi-sdk@0.1.1/dist/obi-sdk.standalone.iife.js
|
|
314
|
-
```
|
|
315
|
-
|
|
316
|
-
### Widget Positioning
|
|
121
|
+
## Widget Positioning
|
|
317
122
|
|
|
318
123
|
The widget can be positioned in one of four corners of the page:
|
|
319
124
|
|
|
@@ -347,10 +152,6 @@ window.obiWidgetConfig = {
|
|
|
347
152
|
}
|
|
348
153
|
```
|
|
349
154
|
|
|
350
|
-
## Contributing
|
|
351
|
-
|
|
352
|
-
Contributions are welcome! Please feel free to submit a Pull Request.
|
|
353
|
-
|
|
354
155
|
## License
|
|
355
156
|
|
|
356
157
|
SEE LICENSE IN LICENSE.txt
|