bonsai-search 3.1.3 → 3.1.4
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 +97 -59
- package/dist/{bonsai-sdk-3.1.3.js → bonsai-sdk-3.1.4.js} +1 -1
- package/dist/{bonsai-search-webcomponent-3.1.3.js → bonsai-search-webcomponent-3.1.4.js} +1 -1
- package/dist/bonsai-search-webcomponent.js +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.js +1 -1
- package/package.json +1 -1
- /package/dist/{bonsai-sdk-3.1.3.css → bonsai-sdk-3.1.4.css} +0 -0
- /package/dist/{bonsai-searchbar-3.1.3.js → bonsai-searchbar-3.1.4.js} +0 -0
- /package/dist/{bonsai-searchbar-webcomponent-3.1.3.js → bonsai-searchbar-webcomponent-3.1.4.js} +0 -0
package/README.md
CHANGED
|
@@ -2,64 +2,110 @@
|
|
|
2
2
|
|
|
3
3
|
AI-powered search web components for e-commerce. Drop-in `<bonsai-search>` and `<bonsai-searchbar>` custom elements for adding semantic product search to any website.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Quick Start
|
|
6
6
|
|
|
7
|
-
###
|
|
7
|
+
### 1. Install
|
|
8
8
|
|
|
9
9
|
```bash
|
|
10
10
|
npm install bonsai-search
|
|
11
11
|
```
|
|
12
12
|
|
|
13
|
-
|
|
14
|
-
// Registers <bonsai-search> custom element
|
|
15
|
-
import "bonsai-search";
|
|
13
|
+
### 2. Create an HTML file
|
|
16
14
|
|
|
17
|
-
|
|
18
|
-
|
|
15
|
+
```html
|
|
16
|
+
<!doctype html>
|
|
17
|
+
<html lang="en">
|
|
18
|
+
<head>
|
|
19
|
+
<meta charset="UTF-8" />
|
|
20
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
21
|
+
<title>Bonsai Search</title>
|
|
22
|
+
<script type="module">
|
|
23
|
+
import "bonsai-search";
|
|
24
|
+
</script>
|
|
25
|
+
<style>
|
|
26
|
+
.search-container {
|
|
27
|
+
width: 100%;
|
|
28
|
+
max-width: 42rem;
|
|
29
|
+
margin: 4rem auto;
|
|
30
|
+
min-height: 350px;
|
|
31
|
+
}
|
|
32
|
+
</style>
|
|
33
|
+
</head>
|
|
34
|
+
<body>
|
|
35
|
+
<div class="search-container">
|
|
36
|
+
<bonsai-search
|
|
37
|
+
api-key="your-api-key"
|
|
38
|
+
base-url="https://api.hibonsai.com/rest/search/v3/"
|
|
39
|
+
placeholder="Describe what you're looking for..."
|
|
40
|
+
suggestions='["What are your best sellers?", "Do you offer free shipping?"]'
|
|
41
|
+
max-results="20"
|
|
42
|
+
render-price
|
|
43
|
+
markdown
|
|
44
|
+
brand-color="#0A5B3B"
|
|
45
|
+
text-color="#303030"
|
|
46
|
+
muted-color="#9CA3AF">
|
|
47
|
+
</bonsai-search>
|
|
48
|
+
</div>
|
|
49
|
+
</body>
|
|
50
|
+
</html>
|
|
19
51
|
```
|
|
20
52
|
|
|
21
|
-
###
|
|
22
|
-
|
|
23
|
-
```html
|
|
24
|
-
<!-- Full search component -->
|
|
25
|
-
<script src="https://assets.hibonsai.com/sdk/bonsai-search-webcomponent-3.1.2.js"></script>
|
|
53
|
+
### 3. Run with any dev server
|
|
26
54
|
|
|
27
|
-
|
|
28
|
-
|
|
55
|
+
```bash
|
|
56
|
+
npx vite
|
|
29
57
|
```
|
|
30
58
|
|
|
31
|
-
|
|
59
|
+
Open http://localhost:5173 and you're done.
|
|
32
60
|
|
|
33
|
-
|
|
61
|
+
> **Note:** The `import "bonsai-search"` is an ESM module import that requires a bundler (Vite, webpack, etc.) to resolve. For a no-bundler setup, use the CDN option below.
|
|
34
62
|
|
|
35
|
-
|
|
63
|
+
## CDN (no bundler needed)
|
|
36
64
|
|
|
37
65
|
```html
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
</
|
|
66
|
+
<!doctype html>
|
|
67
|
+
<html lang="en">
|
|
68
|
+
<head>
|
|
69
|
+
<meta charset="UTF-8" />
|
|
70
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
71
|
+
<title>Bonsai Search</title>
|
|
72
|
+
<script
|
|
73
|
+
src="https://assets.hibonsai.com/sdk/bonsai-search-webcomponent-3.1.3.js"
|
|
74
|
+
defer>
|
|
75
|
+
</script>
|
|
76
|
+
<style>
|
|
77
|
+
.search-container {
|
|
78
|
+
width: 100%;
|
|
79
|
+
max-width: 42rem;
|
|
80
|
+
margin: 4rem auto;
|
|
81
|
+
min-height: 350px;
|
|
82
|
+
}
|
|
83
|
+
</style>
|
|
84
|
+
</head>
|
|
85
|
+
<body>
|
|
86
|
+
<div class="search-container">
|
|
87
|
+
<bonsai-search
|
|
88
|
+
api-key="your-api-key"
|
|
89
|
+
base-url="https://api.hibonsai.com/rest/search/v3/"
|
|
90
|
+
placeholder="Describe what you're looking for..."
|
|
91
|
+
suggestions='["What are your best sellers?", "Do you offer free shipping?"]'
|
|
92
|
+
max-results="20"
|
|
93
|
+
render-price
|
|
94
|
+
markdown
|
|
95
|
+
brand-color="#0A5B3B"
|
|
96
|
+
text-color="#303030"
|
|
97
|
+
muted-color="#9CA3AF">
|
|
98
|
+
</bonsai-search>
|
|
99
|
+
</div>
|
|
100
|
+
</body>
|
|
101
|
+
</html>
|
|
56
102
|
```
|
|
57
103
|
|
|
58
|
-
###
|
|
59
|
-
|
|
60
|
-
Lightweight search input with suggestions dropdown. Use this when you want to handle results rendering yourself.
|
|
104
|
+
### Searchbar Only (CDN)
|
|
61
105
|
|
|
62
106
|
```html
|
|
107
|
+
<script src="https://assets.hibonsai.com/sdk/bonsai-searchbar-webcomponent-3.1.3.js" defer></script>
|
|
108
|
+
|
|
63
109
|
<bonsai-searchbar
|
|
64
110
|
api-key="your-api-key"
|
|
65
111
|
base-url="https://api.hibonsai.com/rest/search/v3/"
|
|
@@ -68,9 +114,14 @@ Lightweight search input with suggestions dropdown. Use this when you want to ha
|
|
|
68
114
|
</bonsai-searchbar>
|
|
69
115
|
```
|
|
70
116
|
|
|
71
|
-
##
|
|
117
|
+
## Exports
|
|
72
118
|
|
|
73
|
-
|
|
119
|
+
| Import | Registers |
|
|
120
|
+
|--------|-----------|
|
|
121
|
+
| `import "bonsai-search"` | `<bonsai-search>` |
|
|
122
|
+
| `import "bonsai-search/searchbar"` | `<bonsai-searchbar>` |
|
|
123
|
+
|
|
124
|
+
## Attributes
|
|
74
125
|
|
|
75
126
|
| Attribute | Description | Default |
|
|
76
127
|
|-----------|-------------|---------|
|
|
@@ -88,7 +139,7 @@ Lightweight search input with suggestions dropdown. Use this when you want to ha
|
|
|
88
139
|
| `items-label` | Label for items when no recommendations | `"Items"` |
|
|
89
140
|
| `theme` | Color theme: `"light"`, `"dark"`, or `"auto"` | `"light"` |
|
|
90
141
|
|
|
91
|
-
|
|
142
|
+
## Theming
|
|
92
143
|
|
|
93
144
|
| Attribute | Description |
|
|
94
145
|
|-----------|-------------|
|
|
@@ -106,28 +157,15 @@ Lightweight search input with suggestions dropdown. Use this when you want to ha
|
|
|
106
157
|
| `canvas-color` | Canvas/page background |
|
|
107
158
|
| `results-columns` | Number of grid columns for results |
|
|
108
159
|
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
The web components emit custom events that bubble and are composed:
|
|
160
|
+
## Events
|
|
112
161
|
|
|
113
162
|
```javascript
|
|
114
163
|
const el = document.querySelector("bonsai-search");
|
|
115
164
|
|
|
116
|
-
el.addEventListener("search", (e) =>
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
el.addEventListener("results", (e) => {
|
|
121
|
-
console.log("Results:", e.detail.results);
|
|
122
|
-
});
|
|
123
|
-
|
|
124
|
-
el.addEventListener("ai", (e) => {
|
|
125
|
-
console.log("AI data:", e.detail);
|
|
126
|
-
});
|
|
127
|
-
|
|
128
|
-
el.addEventListener("error", (e) => {
|
|
129
|
-
console.log("Error:", e.detail.error);
|
|
130
|
-
});
|
|
165
|
+
el.addEventListener("search", (e) => console.log("Query:", e.detail.query));
|
|
166
|
+
el.addEventListener("results", (e) => console.log("Results:", e.detail.results));
|
|
167
|
+
el.addEventListener("ai", (e) => console.log("AI data:", e.detail));
|
|
168
|
+
el.addEventListener("error", (e) => console.log("Error:", e.detail.error));
|
|
131
169
|
```
|
|
132
170
|
|
|
133
171
|
## Development
|
|
@@ -911,7 +911,7 @@
|
|
|
911
911
|
|
|
912
912
|
//#endregion
|
|
913
913
|
//#region src/index.ts
|
|
914
|
-
const VERSION = "3.1.
|
|
914
|
+
const VERSION = "3.1.4";
|
|
915
915
|
const ICONS = {
|
|
916
916
|
search: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
917
917
|
<circle cx="11" cy="11" r="8"></circle>
|
|
@@ -1148,7 +1148,7 @@ Please report this to https://github.com/markedjs/marked.`,i){let n="<p>An error
|
|
|
1148
1148
|
--bonsai-muted-color: #a1a1aa;
|
|
1149
1149
|
--bonsai-input-bg: #1f2229;
|
|
1150
1150
|
}
|
|
1151
|
-
`}}typeof window<"u"&&!customElements.get("bonsai-searchbar")&&customElements.define("bonsai-searchbar",kt);const wt="3.1.
|
|
1151
|
+
`}}typeof window<"u"&&!customElements.get("bonsai-searchbar")&&customElements.define("bonsai-searchbar",kt);const wt="3.1.4",P={search:`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
1152
1152
|
<circle cx="11" cy="11" r="8"></circle>
|
|
1153
1153
|
<path d="m21 21-4.35-4.35"></path>
|
|
1154
1154
|
</svg>`,arrowRight:`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
@@ -2503,7 +2503,7 @@ class vt extends HTMLElement {
|
|
|
2503
2503
|
}
|
|
2504
2504
|
}
|
|
2505
2505
|
typeof window < "u" && !customElements.get("bonsai-searchbar") && customElements.define("bonsai-searchbar", vt);
|
|
2506
|
-
const yt = "3.1.
|
|
2506
|
+
const yt = "3.1.4", E = {
|
|
2507
2507
|
search: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
2508
2508
|
<circle cx="11" cy="11" r="8"></circle>
|
|
2509
2509
|
<path d="m21 21-4.35-4.35"></path>
|
package/dist/index.cjs
CHANGED
|
@@ -910,7 +910,7 @@ if (typeof window !== "undefined" && !customElements.get("bonsai-searchbar")) cu
|
|
|
910
910
|
|
|
911
911
|
//#endregion
|
|
912
912
|
//#region src/index.ts
|
|
913
|
-
const VERSION = "3.1.
|
|
913
|
+
const VERSION = "3.1.4";
|
|
914
914
|
const ICONS = {
|
|
915
915
|
search: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
916
916
|
<circle cx="11" cy="11" r="8"></circle>
|
package/dist/index.js
CHANGED
|
@@ -910,7 +910,7 @@ if (typeof window !== "undefined" && !customElements.get("bonsai-searchbar")) cu
|
|
|
910
910
|
|
|
911
911
|
//#endregion
|
|
912
912
|
//#region src/index.ts
|
|
913
|
-
const VERSION = "3.1.
|
|
913
|
+
const VERSION = "3.1.4";
|
|
914
914
|
const ICONS = {
|
|
915
915
|
search: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
916
916
|
<circle cx="11" cy="11" r="8"></circle>
|
package/package.json
CHANGED
|
File without changes
|
|
File without changes
|
/package/dist/{bonsai-searchbar-webcomponent-3.1.3.js → bonsai-searchbar-webcomponent-3.1.4.js}
RENAMED
|
File without changes
|