bonsai-search 3.0.8 → 3.0.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.
Files changed (7) hide show
  1. package/README.md +152 -61
  2. package/dist/{bonsai-sdk-3.0.8.js → bonsai-sdk-3.0.9.js} +1 -1
  3. package/dist/index.cjs +1 -1
  4. package/dist/index.js +1 -1
  5. package/package.json +1 -1
  6. /package/dist/{bonsai-sdk-3.0.8.css → bonsai-sdk-3.0.9.css} +0 -0
  7. /package/dist/{bonsai-searchbar-3.0.8.js → bonsai-searchbar-3.0.9.js} +0 -0
package/README.md CHANGED
@@ -1,84 +1,175 @@
1
- # Bonsai SDK
1
+ # Bonsai Search SDK
2
2
 
3
- The build and CDN publish system for the Bonsai Search SDK.
3
+ AI-powered search for e-commerce. Drop-in web component or JavaScript SDK for adding semantic product search to any website.
4
4
 
5
- ## Development
5
+ ## Installation
6
6
 
7
- - Install dependencies:
7
+ ### npm
8
8
 
9
9
  ```bash
10
- npm install
10
+ npm install bonsai-search
11
11
  ```
12
12
 
13
- - Run the unit tests:
13
+ ### CDN (Web Component)
14
14
 
15
- ```bash
16
- npm run test
15
+ ```html
16
+ <script src="https://assets.hibonsai.com/sdk/bonsai-search-webcomponent-3.0.8.js"></script>
17
17
  ```
18
18
 
19
- - Build the library:
19
+ ### CDN (Searchbar Only)
20
20
 
21
- ```bash
22
- npm run build
21
+ ```html
22
+ <script src="https://assets.hibonsai.com/sdk/bonsai-searchbar-webcomponent-3.0.8.js"></script>
23
23
  ```
24
24
 
25
- ## I just want to test the SDK with a tenant
26
-
27
- ```bash
28
- cd sdk
29
- npm install
30
- npm run build
31
- npx serve
32
- #edit index.html to suit your test (apikey mostly)
33
- open http://localhost:3000
25
+ ## Usage
26
+
27
+ ### Web Component
28
+
29
+ ```html
30
+ <bonsai-search
31
+ api-key="your-api-key"
32
+ base-url="https://api.hibonsai.com/rest/search/v2/"
33
+ placeholder="Describe what you're looking for..."
34
+ suggestions='["suggestion 1", "suggestion 2"]'
35
+ max-results="20"
36
+ render-price
37
+ brand-color="#0A5B3B"
38
+ text-color="#303030"
39
+ muted-color="#9CA3AF"
40
+ input-bg="#f5f5f5"
41
+ card-bg="#f5f5f5"
42
+ image-object-fit="cover"
43
+ featured-items-label="Featured Items"
44
+ more-items-label="More Items"
45
+ items-label="Items">
46
+ </bonsai-search>
34
47
  ```
35
48
 
36
- ## Unhandled case right now
49
+ ### JavaScript SDK
37
50
 
38
51
  ```javascript
39
- renderResults(data, results) {
40
- if (!this.resultsContainer)
41
- return;
42
-
43
- //This was to remove all faw content for bathhouse and just let the recommendation stand alone as "THE answer"
44
- for (let i = results.length - 1; i >= 0; i--) {
45
- if (!results[i].productType === "faq") {
46
- results.splice(i, 1);
47
- }
48
- }
52
+ import { BonsaiSearch } from "bonsai-search";
53
+
54
+ const search = new BonsaiSearch({
55
+ container: document.getElementById("search-container"),
56
+ apiKey: "your-api-key",
57
+ baseUrl: "https://api.hibonsai.com/rest/search/v2/",
58
+ placeholder: "Describe what you're looking for...",
59
+ suggestions: ["suggestion 1", "suggestion 2"],
60
+ onSearch: (query) => {
61
+ console.log("Searching for:", query);
62
+ },
63
+ onResults: (results) => {
64
+ console.log("Found results:", results);
65
+ },
66
+ onAi: (data) => {
67
+ console.log("AI results:", data);
68
+ },
69
+ onError: (error) => {
70
+ console.error("Search error:", error);
71
+ },
72
+ });
49
73
  ```
50
74
 
51
- ## Aurora Integration
52
-
53
- inside a `<script>` tag:
75
+ ## Configuration
76
+
77
+ ### Web Component Attributes
78
+
79
+ | Attribute | Description | Default |
80
+ |-----------|-------------|---------|
81
+ | `api-key` | **(Required)** API key for authentication | — |
82
+ | `base-url` | API endpoint URL | `https://api.hibonsai.com/rest/search/v2/` |
83
+ | `placeholder` | Search input placeholder text | `"Describe what you're looking for..."` |
84
+ | `suggestions` | JSON array of suggestion strings | `[]` |
85
+ | `max-results` | Maximum number of results to display | `50` |
86
+ | `timeout-ms` | Request timeout in milliseconds | `30000` |
87
+ | `render-price` | Show product prices (boolean attribute) | `false` |
88
+ | `markdown` | Enable markdown in recommendation text (boolean attribute) | `false` |
89
+ | `image-object-fit` | Image fit mode: `"cover"` or `"contain"` | `"cover"` |
90
+ | `featured-items-label` | Label for featured/recommended items section | `"Featured Items"` |
91
+ | `more-items-label` | Label for additional items section | `"More Items"` |
92
+ | `items-label` | Label for items when no recommendations | `"Items"` |
93
+ | `theme` | Color theme: `"light"`, `"dark"`, or `"auto"` | `"light"` |
94
+
95
+ ### Theming Attributes
96
+
97
+ | Attribute | Description |
98
+ |-----------|-------------|
99
+ | `brand-color` | Primary brand color |
100
+ | `text-color` | Main text color |
101
+ | `suggestions-text-color` | Suggestions dropdown text color |
102
+ | `input-text-color` | Search input text color |
103
+ | `results-text-color` | Results section text color |
104
+ | `card-text-color` | Card text color |
105
+ | `suggestions-hover-bg` | Suggestions hover background |
106
+ | `muted-color` | Muted/secondary text color |
107
+ | `input-bg` | Search input background |
108
+ | `card-bg` | Result card background |
109
+ | `surface-color` | Surface background |
110
+ | `canvas-color` | Canvas/page background |
111
+ | `results-columns` | Number of grid columns for results |
112
+
113
+ ### JavaScript SDK Options
114
+
115
+ | Option | Type | Description |
116
+ |--------|------|-------------|
117
+ | `container` | `HTMLElement` | **(Required)** Container element for the search UI |
118
+ | `apiKey` | `string` | **(Required)** API key for authentication |
119
+ | `baseUrl` | `string` | API endpoint URL |
120
+ | `placeholder` | `string` | Search input placeholder text |
121
+ | `suggestions` | `string[]` | Array of search suggestions |
122
+ | `debounceMs` | `number` | Debounce delay for search-as-you-type (0 = disabled) |
123
+ | `maxResults` | `number` | Maximum number of results |
124
+ | `timeoutMs` | `number` | Request timeout in milliseconds |
125
+ | `renderPrice` | `boolean` | Show product prices |
126
+ | `imageObjectFit` | `"cover" \| "contain"` | Image fit mode |
127
+ | `imageHostname` | `string` | CDN hostname for image srcset generation |
128
+ | `generateSrcSet` | `boolean` | Generate srcset attributes for images |
129
+ | `srcSetSizes` | `SrcSetSize[]` | Sizes for srcset generation |
130
+ | `markdown` | `boolean` | Enable markdown in recommendations |
131
+ | `featuredItemsLabel` | `string` | Label for featured items section |
132
+ | `moreItemsLabel` | `string` | Label for more items section |
133
+ | `itemsLabel` | `string` | Label for items section |
134
+ | `onSearch` | `(query: string) => void` | Callback when search is initiated |
135
+ | `onResults` | `(results: SearchResult[]) => void` | Callback when initial results arrive |
136
+ | `onAi` | `(data: AiEventData) => void` | Callback when AI-scored results arrive |
137
+ | `onError` | `(error: Error) => void` | Callback on error |
138
+ | `onImg` | `(result, img, wrapper, sdk) => void` | Callback to customize image elements |
139
+ | `onPrice` | `(result, price, parent?) => string` | Callback to format prices |
140
+
141
+ ### Events (Web Component)
142
+
143
+ The web component emits custom events that bubble and are composed:
54
144
 
55
145
  ```javascript
56
- function waitForWindowObject(objectName, interval = 100) {
57
- return new Promise((resolve) => {
58
- const intervalId = setInterval(() => {
59
- if (window[objectName]) {
60
- clearInterval(intervalId);
61
- resolve(window[objectName]);
62
- }
63
- }, interval);
64
- });
65
- }
66
- waitForWindowObject("BonsaiSearch").then(() => {
67
- const search = new BonsaiSearch({
68
- container: document.getElementsByClassName("framer-ys3trd-container")[0],
69
- apiKey: "FA3s_HgeI-oc1zogV8qRnT06s4NJJwaRgmDlo7eL0DiEo7ZTpZoqc9bwcLDb8Z4_", // Replace with your API key
70
- baseUrl: "https://api.hibonsai.com/rest/search/v2/", // Replace with your API URL
71
- placeholder: "Ask us any question here...",
72
- suggestions: ["suggestion 1", "suggestion 2", "suggestion 3"],
73
- onSearch: (query) => {
74
- console.log("Searching for:", query);
75
- },
76
- onResults: (results) => {
77
- console.log("Found results:", results);
78
- },
79
- onError: (error) => {
80
- console.error("Search error:", error);
81
- },
82
- });
146
+ const el = document.querySelector("bonsai-search");
147
+
148
+ el.addEventListener("search", (e) => {
149
+ console.log("Query:", e.detail.query);
150
+ });
151
+
152
+ el.addEventListener("results", (e) => {
153
+ console.log("Results:", e.detail.results);
154
+ });
155
+
156
+ el.addEventListener("ai", (e) => {
157
+ console.log("AI data:", e.detail);
83
158
  });
159
+
160
+ el.addEventListener("error", (e) => {
161
+ console.log("Error:", e.detail.error);
162
+ });
163
+ ```
164
+
165
+ ## Development
166
+
167
+ ```bash
168
+ npm install
169
+ npm run dev # Watch mode (SDK)
170
+ npm run dev:webcomponents # Dev server (web components)
171
+ npm run build # Build SDK
172
+ npm run build:webcomponents # Build web components
173
+ npm run test # Run tests
174
+ npm run typecheck # Type check
84
175
  ```
package/dist/{bonsai-sdk-3.0.8.js → bonsai-sdk-3.0.9.js} RENAMED
@@ -911,7 +911,7 @@
911
911
 
912
912
  //#endregion
913
913
  //#region src/index.ts
914
- const VERSION = "3.0.8";
914
+ const VERSION = "3.0.9";
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>
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.0.8";
913
+ const VERSION = "3.0.9";
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.0.8";
913
+ const VERSION = "3.0.9";
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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bonsai-search",
3
- "version": "3.0.8",
3
+ "version": "3.0.9",
4
4
  "description": "Bonsai Search SDK",
5
5
  "type": "module",
6
6
  "files": [