obi-sdk 0.1.7 → 0.1.9

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 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
- - ASssistant interacts through voice and screen share
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
- ## Quick Start
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 full inline loader script from below
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
- ```html
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
- user: {
47
- id: "user-123",
48
- email: "user@example.com",
49
- },
50
- }
51
- </script>
52
- </head>
53
- <body>
54
- <!-- Your website content -->
34
+ **Example HTML structure:**
55
35
 
56
- <!-- Add Obi widget loader script at the end of body -->
57
- <script>
58
- ;(function (w, d) {
59
- "use strict"
60
- var c = {
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
- autoInit: true,
63
- }
64
- w.__obiSDKLoading = w.__obiSDKLoading || !1
65
- function i() {
66
- var f = w.obiWidgetConfig || {}
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)
91
- }
92
- function m(cb) {
93
- try {
94
- var x = new XMLHttpRequest()
95
- x.open("GET", "https://registry.npmjs.org/obi-sdk/latest")
96
- x.onload = function () {
97
- if (x.status === 200) {
98
- try {
99
- var r = JSON.parse(x.responseText)
100
- cb(r.version)
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")
44
+ apiKey: "YOUR_API_KEY",
45
+ user: {
46
+ id: "user-123",
47
+ email: "user@example.com",
48
+ },
159
49
  }
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
- ## How It Works
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
186
-
187
- ## Advanced Loader Usage
62
+ ### Using a CDN Link
188
63
 
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,117 +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
- ## Installation for npm Projects
207
-
208
- You can also install the SDK via npm:
209
-
210
- ```bash
211
- npm install obi-sdk
212
- ```
213
-
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
- ## Always Load the Latest SDK Version
226
-
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. The dynamic loader follows the same version detection mechanism as the inline script, querying the npm registry to get the latest version.
228
-
229
- ```tsx
230
- import { initObi } from "obi-sdk"
231
-
232
- // In a React component:
233
- useEffect(() => {
234
- const setupObi = async () => {
235
- try {
236
- // This will:
237
- // 1. Check npm registry for the latest version
238
- // 2. Load that specific version from unpkg.com
239
- // 3. Initialize the widget with your config
240
- await initObi({
241
- apiKey: "YOUR_API_KEY",
242
- position: "bottom-right",
243
- user: {
244
- id: "user-123",
245
- email: "user@example.com",
246
- },
247
- })
248
- console.log("Obi Assistant initialized with latest SDK")
249
- } catch (error) {
250
- console.error("Failed to initialize Obi Assistant:", error)
251
- }
252
- }
253
-
254
- // Initialize Obi
255
- setupObi()
256
- }, [])
257
- ```
258
-
259
- This approach ensures your application always uses the newest SDK version without requiring updates to your codebase. The loader will:
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
79
+ ## Widget Positioning
317
80
 
318
81
  The widget can be positioned in one of four corners of the page:
319
82
 
@@ -324,33 +87,6 @@ window.obiWidgetConfig = {
324
87
  }
325
88
  ```
326
89
 
327
- ### Theming
328
-
329
- The widget supports light and dark themes:
330
-
331
- ```js
332
- window.obiWidgetConfig = {
333
- theme: "light", // Options: "light", "dark"
334
- apiKey: "YOUR_API_KEY",
335
- }
336
- ```
337
-
338
- ### SDK Version Control
339
-
340
- You can specify which version of the SDK to load:
341
-
342
- ```js
343
- window.obiWidgetConfig = {
344
- sdkVersion: "latest", // Use "latest" or a specific version number
345
- noCacheSDK: false, // Set to true to bypass cache
346
- apiKey: "YOUR_API_KEY",
347
- }
348
- ```
349
-
350
- ## Contributing
351
-
352
- Contributions are welcome! Please feel free to submit a Pull Request.
353
-
354
90
  ## License
355
91
 
356
92
  SEE LICENSE IN LICENSE.txt