@hachther/akilio-widget 0.5.0 → 0.6.2
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 +105 -0
- package/dist/AkilioWidget.d.ts +6 -3
- package/dist/akilio-widget.min.js +43 -43
- package/dist/components/ChatPanel.d.ts +19 -3
- package/dist/components/Launcher.d.ts +2 -1
- package/dist/index.min.js +6013 -5673
- package/dist/index.umd.min.cjs +31 -30
- package/dist/lib/client.d.ts +3 -1
- package/dist/logos/AkilioMark.d.ts +2 -1
- package/dist/style.css +1377 -1
- package/dist/types.d.ts +80 -1
- package/dist/vanilla.d.ts +1 -0
- package/package.json +7 -4
- package/dist/akilio-widget.css +0 -1
- package/dist/driver.js-CVJgNCO-.js +0 -534
package/README.md
CHANGED
|
@@ -1,5 +1,110 @@
|
|
|
1
1
|
# Akilio Widget
|
|
2
2
|
|
|
3
|
+
## Style isolation
|
|
4
|
+
|
|
5
|
+
The widget renders in a Shadow DOM by default. Host-site resets and framework
|
|
6
|
+
styles cannot override its buttons, text areas, images, or layout, and widget
|
|
7
|
+
styles do not leak into the surrounding page.
|
|
8
|
+
|
|
9
|
+
```tsx
|
|
10
|
+
<AkilioWidget
|
|
11
|
+
apiBaseUrl="https://app.akilio-ai.com"
|
|
12
|
+
projectKey="your-project-key"
|
|
13
|
+
styleIsolation="shadow"
|
|
14
|
+
/>
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
Use `styleIsolation="scoped"` for a normal-DOM integration with Akilio-prefixed
|
|
18
|
+
CSS, or `styleIsolation="none"` when loading `@hachther/akilio-widget/style.css`
|
|
19
|
+
yourself. Standalone scripts accept `data-style-isolation="shadow"`; Shadow DOM
|
|
20
|
+
is also their default.
|
|
21
|
+
|
|
22
|
+
## Streaming responses
|
|
23
|
+
|
|
24
|
+
The widget uses the authenticated SSE endpoint by default. It displays retrieval
|
|
25
|
+
and answer-preparation status, appends `answer.delta` content as it arrives, and
|
|
26
|
+
then replaces the transient answer with the canonical `final` payload (including
|
|
27
|
+
citations, products, and suggestions).
|
|
28
|
+
|
|
29
|
+
```tsx
|
|
30
|
+
<AkilioWidget
|
|
31
|
+
apiBaseUrl="https://app.akilio-ai.com"
|
|
32
|
+
projectKey="your-project-key"
|
|
33
|
+
streaming
|
|
34
|
+
/>
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
Use `streaming={false}` or `data-streaming="false"` to use `POST /api/v1/chat/`
|
|
38
|
+
for compatibility with an older backend or proxy.
|
|
39
|
+
|
|
40
|
+
## Server widget policy
|
|
41
|
+
|
|
42
|
+
The public project configuration may include an authoritative `widget_policy`.
|
|
43
|
+
The widget applies it automatically:
|
|
44
|
+
|
|
45
|
+
- `available` disables questions while the project is unavailable.
|
|
46
|
+
- `assistant_mode` is sent to chat instead of a client routing hint.
|
|
47
|
+
- `commerce_enabled` controls product rendering and commerce event tracking.
|
|
48
|
+
- `branding` enforces required, removable, or white-label presentation.
|
|
49
|
+
|
|
50
|
+
For projects with `branding: "removable"`, the host can hide Akilio branding:
|
|
51
|
+
|
|
52
|
+
```tsx
|
|
53
|
+
<AkilioWidget showAkilioBranding={false} />
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
The standalone equivalent is `data-show-akilio-branding="false"`. A policy of
|
|
57
|
+
`akilio_required` always shows Akilio branding, while `white_label` always hides
|
|
58
|
+
it regardless of the client option. Older API responses without
|
|
59
|
+
`widget_policy` retain the previous widget behavior.
|
|
60
|
+
|
|
61
|
+
The message composer automatically expands for multiline text up to its bounded
|
|
62
|
+
maximum height, after which it scrolls internally.
|
|
63
|
+
|
|
64
|
+
When branding is required, a compact “Powered by Akilio” notice is displayed
|
|
65
|
+
below the composer at the bottom of the widget. It is omitted for removable and
|
|
66
|
+
white-label policies.
|
|
67
|
+
|
|
68
|
+
The default widget primary color follows the Akilio palette (`#0F766E`) with
|
|
69
|
+
`#115E59` for hover and pressed states. Project configuration and the `theme`
|
|
70
|
+
prop continue to override these defaults; `theme.primaryDark` can customize the
|
|
71
|
+
interactive hover color.
|
|
72
|
+
|
|
73
|
+
Floating, drawer, side-panel, and hybrid Shadow DOM widgets use the browser top
|
|
74
|
+
layer when supported. This keeps the widget above host-site chat, search, cookie,
|
|
75
|
+
and navigation overlays—even when those elements activate after the composer
|
|
76
|
+
receives focus. Older browsers use a fixed, isolated host at the maximum safe
|
|
77
|
+
z-index. Inline widgets remain in the normal document layout.
|
|
78
|
+
|
|
79
|
+
## Browser control API
|
|
80
|
+
|
|
81
|
+
After the widget fires `akilio:ready`, integrations can control the real widget
|
|
82
|
+
without querying its DOM. The frozen API works with normal DOM and Shadow DOM:
|
|
83
|
+
|
|
84
|
+
```js
|
|
85
|
+
await window.AkilioWidget.open();
|
|
86
|
+
await window.AkilioWidget.typeDraft('How can I request a quote?', {
|
|
87
|
+
interval: 35,
|
|
88
|
+
focus: true,
|
|
89
|
+
clearExisting: true,
|
|
90
|
+
});
|
|
91
|
+
|
|
92
|
+
// Let the visitor click Send, or submit through the same SSE workflow:
|
|
93
|
+
const response = await window.AkilioWidget.submit();
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
Available methods are `open`, `close`, `setDraft`, `typeDraft`, `clearDraft`,
|
|
97
|
+
`cancelTyping`, `submit`, `ask`, `reset`, and `getState`. Rejected operations
|
|
98
|
+
include a stable `code` such as `EMPTY_DRAFT`, `BUSY`, `TYPING_CANCELLED`, or
|
|
99
|
+
`STREAM_FAILED`. `getState()` returns only safe UI and conversation state and
|
|
100
|
+
never exposes authentication data.
|
|
101
|
+
|
|
102
|
+
Lifecycle events are dispatched on `window`: `akilio:ready`, `akilio:open`,
|
|
103
|
+
`akilio:close`, `akilio:draft-change`, `akilio:typing-start`,
|
|
104
|
+
`akilio:typing-complete`, `akilio:typing-cancel`, `akilio:question`,
|
|
105
|
+
`akilio:answer-start`, `akilio:answer-delta`, `akilio:answer-complete`,
|
|
106
|
+
`akilio:error`, and `akilio:reset`.
|
|
107
|
+
|
|
3
108
|
Production React and standalone JavaScript widget for the Akilio backend.
|
|
4
109
|
|
|
5
110
|
## Included modes
|
package/dist/AkilioWidget.d.ts
CHANGED
|
@@ -1,4 +1,7 @@
|
|
|
1
|
-
import 'driver.js/dist/driver.css';
|
|
2
|
-
import './styles.css';
|
|
3
1
|
import type { AkilioWidgetProps } from './types';
|
|
4
|
-
|
|
2
|
+
/**
|
|
3
|
+
* Public widget boundary. By default the application and its stylesheet are
|
|
4
|
+
* rendered into a ShadowRoot, preventing CSS resets and component rules from
|
|
5
|
+
* crossing in either direction.
|
|
6
|
+
*/
|
|
7
|
+
export declare function AkilioWidget(props: AkilioWidgetProps): import("react").JSX.Element;
|