@akropolys/kiku 2.2.29 → 2.2.31
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/EMBED.md +103 -57
- package/README.md +107 -105
- package/dist/embed/embed.js +16 -16
- package/dist/embed/meta.json +1 -1
- package/dist/index.js +6 -6
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +6 -6
- package/dist/index.mjs.map +1 -1
- package/package.json +68 -68
package/EMBED.md
CHANGED
|
@@ -1,57 +1,103 @@
|
|
|
1
|
-
#
|
|
2
|
-
|
|
3
|
-
Add the published CDN script before your closing
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
the
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
await Kiku.
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
1
|
+
# JavaScript embed
|
|
2
|
+
|
|
3
|
+
Add Kiku to any website with the published CDN script before your closing
|
|
4
|
+
`</body>` tag. The same embed works with JavaScript frameworks, plain HTML, and
|
|
5
|
+
HTMX. The loader fetches its stylesheet and embed module automatically.
|
|
6
|
+
|
|
7
|
+
```html
|
|
8
|
+
<script src="https://cdn.akropolys.cloud/kiku/2.2.31/kiku.js" data-site-id="YOUR_SITE_ID"
|
|
9
|
+
data-api-token="YOUR_PUBLIC_BROWSER_TOKEN" defer></script>
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
Use the same public browser token as your existing frontend integration. Never
|
|
13
|
+
put secret keys or signing keys in HTML. The embed uses the same domain and
|
|
14
|
+
authentication checks as the React integration. React is bundled privately;
|
|
15
|
+
the host website does not install it. One widget is supported per page.
|
|
16
|
+
|
|
17
|
+
For configuration in JavaScript, omit the data attributes and call this after
|
|
18
|
+
the script loads:
|
|
19
|
+
|
|
20
|
+
```js
|
|
21
|
+
await Kiku.mount({
|
|
22
|
+
siteId: 'YOUR_SITE_ID',
|
|
23
|
+
apiToken: 'YOUR_PUBLIC_BROWSER_TOKEN',
|
|
24
|
+
button: { label: 'Ask us', enableVoice: true },
|
|
25
|
+
});
|
|
26
|
+
await Kiku.open();
|
|
27
|
+
await Kiku.ingest({
|
|
28
|
+
id: 'example', title: 'Example',
|
|
29
|
+
fields: { description: 'Your page data', url: location.href },
|
|
30
|
+
});
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
`Kiku.ingest()` accepts one entity, an array, or signed ingestion records and
|
|
34
|
+
returns the API response. Supply data explicitly; the embed does not guess a
|
|
35
|
+
website's schema. Every catalogue record requires its source record's stable top-level `id`. `fields.url` is optional but recommended when a webpage is available; Kiku can show and save records without one. A supplied URL is kept in saved history. URLs, names and signatures do not replace IDs. Normal ingestion sends one record and works on every plan. An unsigned array uses the batch endpoint and requires Growth, Pro or Business. Signing is optional unless the site requires it in Shell; it is independent of normal versus batch ingestion.
|
|
36
|
+
|
|
37
|
+
For a useful minimal record, send `{ id: 'chair-123', title: 'Linen lounge chair' }`.
|
|
38
|
+
Add facts in `fields`. Use `image` for a cover and `images` for an ordered gallery
|
|
39
|
+
of URLs or `{ url, alt?, caption? }` objects. Each record owns its own photos.
|
|
40
|
+
Prefer absolute HTTPS image URLs; without a record webpage, use absolute URLs.
|
|
41
|
+
The first gallery image is the cover unless `image` overrides it. Re-ingest the
|
|
42
|
+
same ID to update the record or use `images: []` to clear its gallery.
|
|
43
|
+
|
|
44
|
+
Reuse loaded data instead of fetching it again just for ingestion. Await
|
|
45
|
+
`Kiku.ready` after automatic setup and catch errors from `Kiku.ingest`. An await
|
|
46
|
+
inside an async callback does not block browser rendering. If the embed is
|
|
47
|
+
loaded dynamically, wait for its script load before accessing `window.Kiku`.
|
|
48
|
+
The embed does not accept the ingestion client's `batchSize` parameter.
|
|
49
|
+
|
|
50
|
+
Update a record using the same ID and the full attributes/gallery to retain.
|
|
51
|
+
Avoid per-view timestamps or counters in catalogue fields; repeated changes can
|
|
52
|
+
use re-index allowance. Use live data for rapidly changing values when appropriate.
|
|
53
|
+
Listing pages can publish loaded arrays with batch access. Call ingestion from
|
|
54
|
+
your existing data-loading or refresh callback whenever fresh records arrive;
|
|
55
|
+
the embed does not watch API requests automatically. Once indexed, updates are
|
|
56
|
+
shared by every visitor using the same site ID, regardless of who triggered them.
|
|
57
|
+
A browser can publish a complete catalogue array, including items not rendered
|
|
58
|
+
on the page, without visits to each item's page. A paginated result covers only
|
|
59
|
+
its supplied records. Ingestion does not fetch other API pages or refresh stale
|
|
60
|
+
cached source data; full coverage does not require a server-side import.
|
|
61
|
+
|
|
62
|
+
After login, call `Kiku.updateIdentity({ shopperId, userProof })` with a proof
|
|
63
|
+
issued by your server. On logout pass `{}`. `Kiku.destroy()` removes the widget
|
|
64
|
+
and cleans up its client; call `mount()` again to restart. Automatic mounting
|
|
65
|
+
exposes `Kiku.ready`. Repeated script tags or mount calls reuse the same widget.
|
|
66
|
+
|
|
67
|
+
For a restrictive CSP, permit the script origin, existing API/voice endpoints,
|
|
68
|
+
and the styles/fonts already needed by Kiku. Voice still requires HTTPS and
|
|
69
|
+
microphone permission.
|
|
70
|
+
|
|
71
|
+
## CDN files and self-hosting
|
|
72
|
+
|
|
73
|
+
- [Loader](https://cdn.akropolys.cloud/kiku/2.2.31/kiku.js)
|
|
74
|
+
- [Stylesheet](https://cdn.akropolys.cloud/kiku/2.2.31/styles.css)
|
|
75
|
+
- [Embed module](https://cdn.akropolys.cloud/kiku/2.2.31/embed/embed.js)
|
|
76
|
+
|
|
77
|
+
To self-host, install `@akropolys/kiku@2.2.31` and copy `dist/kiku.js`,
|
|
78
|
+
`dist/styles.css`, and the entire `dist/embed` directory to your server. Preserve
|
|
79
|
+
their relative paths and use your hosted loader URL in the script tag. Serve
|
|
80
|
+
JavaScript with the correct MIME type and allow CORS across origins.
|
|
81
|
+
|
|
82
|
+
When building from this repository, run `pnpm --filter @akropolys/kiku build`
|
|
83
|
+
to generate those files.
|
|
84
|
+
|
|
85
|
+
## Site actions
|
|
86
|
+
|
|
87
|
+
Register your API endpoints and JSON Schemas in Shell. Cookie-based APIs need no extra authentication configuration. Relative paths such as `/api/cart/items` resolve against the host website, including on localhost.
|
|
88
|
+
|
|
89
|
+
For an API using Clerk, Auth0 or Supabase bearer tokens, manually mount with the website's existing login client:
|
|
90
|
+
|
|
91
|
+
```js
|
|
92
|
+
await Kiku.mount({
|
|
93
|
+
siteId,
|
|
94
|
+
apiToken,
|
|
95
|
+
actionAuth: { provider: "supabase", client: supabase },
|
|
96
|
+
});
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
For Clerk use `{ provider: "clerk", client: clerk }`; for Auth0 use `{ provider: "auth0", client: auth0 }`. Remove `data-site-id` and `data-api-token` from the loader script when calling `Kiku.mount(options)`; pass them in the options instead. See [manual mounting](https://akropolys.cloud/docs/javascript/#manual-mounting). No application wrapper or React installation is needed. This configuration does not affect standalone batch ingestion.
|
|
100
|
+
|
|
101
|
+
The SDK reads the current token through the existing auth client before every action in text and voice, and adds Authorization internally. The auth client owns renewal. Tokens go directly to the site's API. Adapters default to the page's origin; for a separate API, add `origins: ["https://api.your-site.com"]` and configure browser CORS. `actionHeaders` remains available for custom auth/CSRF headers.
|
|
102
|
+
|
|
103
|
+
The API must validate the session/token and permissions. A `shopperId` or `userProof` does not authorize it. Return HTTP 401 JSON when sign-in is needed, rather than redirecting to a login screen. Shell's server tester does not share shopper cookies. After a timeout, check the actual site state before retrying a mutation. Read the [site actions guide](https://akropolys.cloud/docs/actions/) for both JavaScript and React examples and troubleshooting.
|
package/README.md
CHANGED
|
@@ -1,105 +1,107 @@
|
|
|
1
|
-
# @akropolys/kiku
|
|
2
|
-
|
|
3
|
-
Chat, search, voice, and photo input for your website. Kiku connects visitors to your content and the API actions you configure in Akropolys.
|
|
4
|
-
|
|
5
|
-
[](https://www.npmjs.com/package/@akropolys/kiku) [](https://opensource.org/licenses/MIT) [](https://www.typescriptlang.org/)
|
|
6
|
-
|
|
7
|
-
##
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
```
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
```
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
import '@akropolys/
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
-
|
|
62
|
-
-
|
|
63
|
-
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
|
70
|
-
|
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
- [
|
|
101
|
-
- [
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
1
|
+
# @akropolys/kiku
|
|
2
|
+
|
|
3
|
+
Chat, search, voice, and photo input for your website. Kiku connects visitors to your content and the API actions you configure in Akropolys. For React and Next.js, use the React package below. For other websites, use the CDN embed; it also works in React when you prefer a script integration.
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/@akropolys/kiku) [](https://opensource.org/licenses/MIT) [](https://www.typescriptlang.org/)
|
|
6
|
+
|
|
7
|
+
## JavaScript embed
|
|
8
|
+
|
|
9
|
+
Add Kiku to any website with the published CDN script:
|
|
10
|
+
|
|
11
|
+
```html
|
|
12
|
+
<script
|
|
13
|
+
src="https://cdn.akropolys.cloud/kiku/2.2.31/kiku.js"
|
|
14
|
+
data-site-id="YOUR_SITE_ID"
|
|
15
|
+
data-api-token="YOUR_PUBLIC_BROWSER_TOKEN"
|
|
16
|
+
data-label="Ask Kiku"
|
|
17
|
+
defer
|
|
18
|
+
></script>
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
The embed includes its own React runtime, styles, and mounting. Your website needs no React installation or provider, including when it uses React or Next.js. See the [embed guide](https://github.com/akropolys/sdk/blob/HEAD/packages/kiku/EMBED.md) for configuration, ingestion, and self-hosting.
|
|
22
|
+
|
|
23
|
+
## Install
|
|
24
|
+
|
|
25
|
+
Recommended for React and Next.js apps:
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
|
+
npm install @akropolys/kiku@2.2.31 @akropolys/sdk@2.0.4
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
This package integration requires React and React DOM 17 or later.
|
|
32
|
+
|
|
33
|
+
## React and Next.js
|
|
34
|
+
|
|
35
|
+
```tsx
|
|
36
|
+
'use client';
|
|
37
|
+
|
|
38
|
+
import { AkropolysProvider } from '@akropolys/sdk';
|
|
39
|
+
import { KikuButton } from '@akropolys/kiku';
|
|
40
|
+
import '@akropolys/kiku/styles.css';
|
|
41
|
+
|
|
42
|
+
export default function WebsiteAssistant() {
|
|
43
|
+
return (
|
|
44
|
+
<AkropolysProvider
|
|
45
|
+
siteId={process.env.NEXT_PUBLIC_AKROPOLYS_SITE_ID!}
|
|
46
|
+
apiUrl={process.env.NEXT_PUBLIC_AKROPOLYS_API_URL!}
|
|
47
|
+
apiToken={process.env.NEXT_PUBLIC_AKROPOLYS_API_TOKEN!}
|
|
48
|
+
>
|
|
49
|
+
<KikuButton label="Ask us" enableVoice enableVision />
|
|
50
|
+
</AkropolysProvider>
|
|
51
|
+
);
|
|
52
|
+
}
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
Mount the component once in your app or layout. In Next.js App Router, import the stylesheet in your root layout if that is where your project keeps global CSS.
|
|
56
|
+
|
|
57
|
+
Use your site's public browser token. Keep private keys and server credentials on your server. Enable the corresponding voice and vision features for your site in Shell.
|
|
58
|
+
|
|
59
|
+
## What visitors can do
|
|
60
|
+
|
|
61
|
+
- Ask about your content and compare records in tables.
|
|
62
|
+
- Talk using live voice or include photos in a conversation.
|
|
63
|
+
- Open source records and save items for later.
|
|
64
|
+
- Long-press or right-click a message to access its actions.
|
|
65
|
+
- Use translated controls, right-to-left layouts, and chat themes.
|
|
66
|
+
|
|
67
|
+
## Components
|
|
68
|
+
|
|
69
|
+
| Component | Purpose |
|
|
70
|
+
| --- | --- |
|
|
71
|
+
| `KikuButton` | A launcher that opens the chat window. |
|
|
72
|
+
| `SearchBar` | Inline search with streamed results. |
|
|
73
|
+
|
|
74
|
+
Both components use `AkropolysProvider` from `@akropolys/sdk`.
|
|
75
|
+
|
|
76
|
+
## Customize the launcher
|
|
77
|
+
|
|
78
|
+
```tsx
|
|
79
|
+
<KikuButton
|
|
80
|
+
label="Ask about this property"
|
|
81
|
+
title="Your assistant"
|
|
82
|
+
placeholder="What would you like to know?"
|
|
83
|
+
chips={['Show available properties', 'Compare my options']}
|
|
84
|
+
theme="dark"
|
|
85
|
+
enableVoice
|
|
86
|
+
enableVision
|
|
87
|
+
/>
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
`theme` accepts `light`, `dark`, or an `AkropolysTheme` object from `@akropolys/sdk`. Use `onSelectSource` to handle a visitor selecting a source record.
|
|
91
|
+
|
|
92
|
+
## Your content and actions
|
|
93
|
+
|
|
94
|
+
Give each catalogue record a stable top-level `id`. A webpage link in `fields.url` is optional; Kiku can show and save records without one. See the [SDK ingestion guide](https://github.com/akropolys/sdk/blob/HEAD/packages/sdk/README.md#batch-ingestion-client).
|
|
95
|
+
|
|
96
|
+
Configure action endpoints, methods and request fields in Shell. The widget calls your API from the visitor's browser in chat and voice. Cookie authentication works automatically. For Clerk, Auth0 or Supabase bearer APIs, add one option such as `actionAuth: { provider: "supabase", client: supabase }` to `Kiku.mount(...)`, or use the `actionAuth` prop on your existing React provider. The existing auth client handles token renewal; Kiku adds the header internally. The CDN embed needs no application wrapper. Your API validates permissions and performs the operation. See the [site actions guide](https://akropolys.cloud/docs/actions/).
|
|
97
|
+
|
|
98
|
+
## Links
|
|
99
|
+
|
|
100
|
+
- [Akropolys](https://akropolys.cloud)
|
|
101
|
+
- [Source code](https://github.com/akropolys/sdk)
|
|
102
|
+
- [JavaScript embed guide](https://github.com/akropolys/sdk/blob/HEAD/packages/kiku/EMBED.md)
|
|
103
|
+
- [Headless SDK](https://www.npmjs.com/package/@akropolys/sdk)
|
|
104
|
+
|
|
105
|
+
## License
|
|
106
|
+
|
|
107
|
+
MIT © [Akropolys](https://akropolys.cloud)
|