@guidekit/vanilla 0.1.0-beta.1
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 +58 -0
- package/dist/index.cjs +523 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +76 -0
- package/dist/index.d.ts +76 -0
- package/dist/index.global.js +11623 -0
- package/dist/index.global.js.map +1 -0
- package/dist/index.js +478 -0
- package/dist/index.js.map +1 -0
- package/package.json +40 -0
package/README.md
ADDED
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
# @guidekit/vanilla
|
|
2
|
+
|
|
3
|
+
Vanilla JavaScript bundle for the GuideKit SDK. Provides a script-tag integration for adding an AI assistant to any web page without React.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
### CDN (IIFE)
|
|
8
|
+
|
|
9
|
+
```html
|
|
10
|
+
<script src="https://unpkg.com/@guidekit/vanilla/dist/index.global.js"></script>
|
|
11
|
+
<script>
|
|
12
|
+
GuideKit.init({
|
|
13
|
+
tokenEndpoint: '/api/guidekit/token',
|
|
14
|
+
agent: { name: 'Guide', greeting: 'Hello! How can I help?' },
|
|
15
|
+
options: { mode: 'text' },
|
|
16
|
+
});
|
|
17
|
+
</script>
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
### npm
|
|
21
|
+
|
|
22
|
+
```bash
|
|
23
|
+
npm install @guidekit/vanilla
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
```javascript
|
|
27
|
+
import { init, sendText, destroy } from '@guidekit/vanilla';
|
|
28
|
+
|
|
29
|
+
await init({
|
|
30
|
+
tokenEndpoint: '/api/guidekit/token',
|
|
31
|
+
agent: { name: 'Guide', greeting: 'Hello!' },
|
|
32
|
+
options: { mode: 'text' },
|
|
33
|
+
});
|
|
34
|
+
|
|
35
|
+
// Send a message programmatically
|
|
36
|
+
await sendText('How do I get started?');
|
|
37
|
+
|
|
38
|
+
// Clean up when done
|
|
39
|
+
destroy();
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
## Imperative API
|
|
43
|
+
|
|
44
|
+
| Method | Description |
|
|
45
|
+
|--------|-------------|
|
|
46
|
+
| `init(config)` | Initialize the SDK and render the widget |
|
|
47
|
+
| `sendText(message)` | Send a text message to the assistant |
|
|
48
|
+
| `startVoice()` | Begin voice input (requires `@guidekit/vad`) |
|
|
49
|
+
| `stopVoice()` | Stop voice input |
|
|
50
|
+
| `destroy()` | Tear down the SDK and remove the widget |
|
|
51
|
+
|
|
52
|
+
## Documentation
|
|
53
|
+
|
|
54
|
+
Full documentation: [guidekit.dev/docs/vanilla](https://guidekit.dev/docs/vanilla)
|
|
55
|
+
|
|
56
|
+
## License
|
|
57
|
+
|
|
58
|
+
[MIT](../../LICENSE)
|
package/dist/index.cjs
ADDED
|
@@ -0,0 +1,523 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/index.ts
|
|
21
|
+
var index_exports = {};
|
|
22
|
+
__export(index_exports, {
|
|
23
|
+
VERSION: () => VERSION,
|
|
24
|
+
checkHealth: () => checkHealth,
|
|
25
|
+
destroy: () => destroy,
|
|
26
|
+
dismissHighlight: () => dismissHighlight,
|
|
27
|
+
getAgentState: () => getAgentState,
|
|
28
|
+
getCore: () => getCore,
|
|
29
|
+
getPageModel: () => getPageModel,
|
|
30
|
+
getQuietMode: () => getQuietMode,
|
|
31
|
+
highlight: () => highlight,
|
|
32
|
+
init: () => init,
|
|
33
|
+
isReady: () => isReady,
|
|
34
|
+
navigate: () => navigate,
|
|
35
|
+
registerAction: () => registerAction,
|
|
36
|
+
scrollToSection: () => scrollToSection,
|
|
37
|
+
sendText: () => sendText,
|
|
38
|
+
setPageContext: () => setPageContext,
|
|
39
|
+
setQuietMode: () => setQuietMode,
|
|
40
|
+
startListening: () => startListening,
|
|
41
|
+
startTour: () => startTour,
|
|
42
|
+
stopListening: () => stopListening,
|
|
43
|
+
stopTour: () => stopTour
|
|
44
|
+
});
|
|
45
|
+
module.exports = __toCommonJS(index_exports);
|
|
46
|
+
var import_core = require("@guidekit/core");
|
|
47
|
+
var WIDGET_CSS = (
|
|
48
|
+
/* css */
|
|
49
|
+
`
|
|
50
|
+
:host {
|
|
51
|
+
--gk-primary: #6366f1;
|
|
52
|
+
--gk-primary-hover: #4f46e5;
|
|
53
|
+
--gk-bg: #ffffff;
|
|
54
|
+
--gk-bg-secondary: #f8fafc;
|
|
55
|
+
--gk-text: #1e293b;
|
|
56
|
+
--gk-text-secondary: #64748b;
|
|
57
|
+
--gk-border: #e2e8f0;
|
|
58
|
+
--gk-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
|
|
59
|
+
--gk-radius: 16px;
|
|
60
|
+
--gk-fab-size: 56px;
|
|
61
|
+
--gk-panel-width: 380px;
|
|
62
|
+
--gk-panel-height: 520px;
|
|
63
|
+
--gk-font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
64
|
+
all: initial;
|
|
65
|
+
font-family: var(--gk-font);
|
|
66
|
+
position: fixed;
|
|
67
|
+
z-index: 2147483647;
|
|
68
|
+
bottom: 24px;
|
|
69
|
+
right: 24px;
|
|
70
|
+
}
|
|
71
|
+
@media (prefers-reduced-motion: reduce) {
|
|
72
|
+
*, *::before, *::after {
|
|
73
|
+
animation-duration: 0.01ms !important;
|
|
74
|
+
transition-duration: 0.01ms !important;
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
.gk-fab {
|
|
78
|
+
width: var(--gk-fab-size);
|
|
79
|
+
height: var(--gk-fab-size);
|
|
80
|
+
border-radius: 50%;
|
|
81
|
+
border: none;
|
|
82
|
+
background: var(--gk-primary);
|
|
83
|
+
color: #fff;
|
|
84
|
+
cursor: pointer;
|
|
85
|
+
display: flex;
|
|
86
|
+
align-items: center;
|
|
87
|
+
justify-content: center;
|
|
88
|
+
box-shadow: 0 4px 16px rgba(99, 102, 241, 0.35);
|
|
89
|
+
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
90
|
+
outline: none;
|
|
91
|
+
}
|
|
92
|
+
.gk-fab:hover {
|
|
93
|
+
background: var(--gk-primary-hover);
|
|
94
|
+
transform: scale(1.05);
|
|
95
|
+
}
|
|
96
|
+
.gk-fab:focus-visible {
|
|
97
|
+
outline: 2px solid var(--gk-primary);
|
|
98
|
+
outline-offset: 3px;
|
|
99
|
+
}
|
|
100
|
+
.gk-fab svg { width: 24px; height: 24px; fill: currentColor; }
|
|
101
|
+
.gk-panel {
|
|
102
|
+
position: absolute;
|
|
103
|
+
bottom: calc(var(--gk-fab-size) + 16px);
|
|
104
|
+
right: 0;
|
|
105
|
+
width: var(--gk-panel-width);
|
|
106
|
+
height: var(--gk-panel-height);
|
|
107
|
+
background: var(--gk-bg);
|
|
108
|
+
border-radius: var(--gk-radius);
|
|
109
|
+
box-shadow: var(--gk-shadow);
|
|
110
|
+
display: flex;
|
|
111
|
+
flex-direction: column;
|
|
112
|
+
overflow: hidden;
|
|
113
|
+
opacity: 0;
|
|
114
|
+
transform: translateY(12px) scale(0.95);
|
|
115
|
+
pointer-events: none;
|
|
116
|
+
transition: opacity 0.2s ease, transform 0.2s ease;
|
|
117
|
+
}
|
|
118
|
+
.gk-panel.gk-open {
|
|
119
|
+
opacity: 1;
|
|
120
|
+
transform: translateY(0) scale(1);
|
|
121
|
+
pointer-events: auto;
|
|
122
|
+
}
|
|
123
|
+
.gk-header {
|
|
124
|
+
display: flex;
|
|
125
|
+
align-items: center;
|
|
126
|
+
justify-content: space-between;
|
|
127
|
+
padding: 16px 20px;
|
|
128
|
+
border-bottom: 1px solid var(--gk-border);
|
|
129
|
+
flex-shrink: 0;
|
|
130
|
+
}
|
|
131
|
+
.gk-header-title {
|
|
132
|
+
font-size: 15px;
|
|
133
|
+
font-weight: 600;
|
|
134
|
+
color: var(--gk-text);
|
|
135
|
+
margin: 0;
|
|
136
|
+
}
|
|
137
|
+
.gk-close-btn {
|
|
138
|
+
width: 28px; height: 28px; border-radius: 8px;
|
|
139
|
+
border: none; background: transparent; color: var(--gk-text-secondary);
|
|
140
|
+
cursor: pointer; display: flex; align-items: center; justify-content: center;
|
|
141
|
+
outline: none;
|
|
142
|
+
}
|
|
143
|
+
.gk-close-btn:hover { background: var(--gk-bg-secondary); color: var(--gk-text); }
|
|
144
|
+
.gk-close-btn:focus-visible { outline: 2px solid var(--gk-primary); outline-offset: -2px; }
|
|
145
|
+
.gk-close-btn svg { width: 16px; height: 16px; fill: currentColor; }
|
|
146
|
+
.gk-transcript {
|
|
147
|
+
flex: 1; overflow-y: auto; padding: 16px 20px;
|
|
148
|
+
display: flex; flex-direction: column; gap: 12px; scroll-behavior: smooth;
|
|
149
|
+
}
|
|
150
|
+
.gk-empty {
|
|
151
|
+
flex: 1; display: flex; flex-direction: column; align-items: center;
|
|
152
|
+
justify-content: center; color: var(--gk-text-secondary); text-align: center;
|
|
153
|
+
padding: 32px 16px; font-size: 13px;
|
|
154
|
+
}
|
|
155
|
+
.gk-msg {
|
|
156
|
+
max-width: 85%; padding: 10px 14px; border-radius: 12px;
|
|
157
|
+
font-size: 14px; line-height: 1.5; word-wrap: break-word; white-space: pre-wrap;
|
|
158
|
+
}
|
|
159
|
+
.gk-msg-user {
|
|
160
|
+
align-self: flex-end; background: var(--gk-primary);
|
|
161
|
+
color: #fff; border-bottom-right-radius: 4px;
|
|
162
|
+
}
|
|
163
|
+
.gk-msg-assistant {
|
|
164
|
+
align-self: flex-start; background: var(--gk-bg-secondary);
|
|
165
|
+
color: var(--gk-text); border-bottom-left-radius: 4px;
|
|
166
|
+
}
|
|
167
|
+
.gk-dots {
|
|
168
|
+
align-self: flex-start; display: flex; gap: 4px; padding: 12px 16px;
|
|
169
|
+
}
|
|
170
|
+
.gk-dot {
|
|
171
|
+
width: 6px; height: 6px; border-radius: 50%; background: var(--gk-text-secondary);
|
|
172
|
+
animation: gk-bounce 1.4s ease-in-out infinite;
|
|
173
|
+
}
|
|
174
|
+
.gk-dot:nth-child(2) { animation-delay: 0.16s; }
|
|
175
|
+
.gk-dot:nth-child(3) { animation-delay: 0.32s; }
|
|
176
|
+
@keyframes gk-bounce {
|
|
177
|
+
0%, 80%, 100% { transform: translateY(0); }
|
|
178
|
+
40% { transform: translateY(-6px); }
|
|
179
|
+
}
|
|
180
|
+
.gk-input-area {
|
|
181
|
+
display: flex; align-items: flex-end; gap: 8px;
|
|
182
|
+
padding: 12px 16px; border-top: 1px solid var(--gk-border); flex-shrink: 0;
|
|
183
|
+
}
|
|
184
|
+
.gk-input {
|
|
185
|
+
flex: 1; min-height: 40px; max-height: 120px; padding: 8px 14px;
|
|
186
|
+
border: 1px solid var(--gk-border); border-radius: 12px;
|
|
187
|
+
background: var(--gk-bg); color: var(--gk-text);
|
|
188
|
+
font-family: var(--gk-font); font-size: 14px; line-height: 1.5;
|
|
189
|
+
resize: none; outline: none;
|
|
190
|
+
}
|
|
191
|
+
.gk-input:focus { border-color: var(--gk-primary); box-shadow: 0 0 0 3px rgba(99,102,241,0.15); }
|
|
192
|
+
.gk-send-btn {
|
|
193
|
+
width: 40px; height: 40px; border-radius: 12px; border: none;
|
|
194
|
+
background: var(--gk-primary); color: #fff; cursor: pointer;
|
|
195
|
+
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
|
|
196
|
+
outline: none;
|
|
197
|
+
}
|
|
198
|
+
.gk-send-btn:hover:not(:disabled) { background: var(--gk-primary-hover); }
|
|
199
|
+
.gk-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
200
|
+
.gk-send-btn:focus-visible { outline: 2px solid var(--gk-primary); outline-offset: 3px; }
|
|
201
|
+
.gk-send-btn svg { width: 18px; height: 18px; fill: currentColor; }
|
|
202
|
+
@media (hover: none) and (pointer: coarse), (max-width: 768px) {
|
|
203
|
+
:host { bottom: 16px !important; right: 16px !important; }
|
|
204
|
+
.gk-panel {
|
|
205
|
+
position: fixed; bottom: 0; left: 0; right: 0;
|
|
206
|
+
width: 100%; height: 70vh; max-height: 70vh;
|
|
207
|
+
border-radius: var(--gk-radius) var(--gk-radius) 0 0;
|
|
208
|
+
transform: translateY(100%);
|
|
209
|
+
padding-bottom: env(safe-area-inset-bottom, 0px);
|
|
210
|
+
}
|
|
211
|
+
.gk-panel.gk-open { transform: translateY(0); }
|
|
212
|
+
.gk-send-btn, .gk-close-btn { min-width: 44px; min-height: 44px; }
|
|
213
|
+
.gk-input-area { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
|
|
214
|
+
}
|
|
215
|
+
@media (forced-colors: active) {
|
|
216
|
+
.gk-fab, .gk-send-btn { border: 2px solid ButtonText; }
|
|
217
|
+
.gk-panel { border: 1px solid ButtonText; }
|
|
218
|
+
}
|
|
219
|
+
`
|
|
220
|
+
);
|
|
221
|
+
var SVG_CHAT = '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H5.17L4 17.17V4h16v12z"/><path d="M7 9h10v2H7zm0-3h10v2H7z"/></svg>';
|
|
222
|
+
var SVG_CLOSE = '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>';
|
|
223
|
+
var SVG_SEND = '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>';
|
|
224
|
+
var VanillaWidget = class {
|
|
225
|
+
host;
|
|
226
|
+
shadow;
|
|
227
|
+
panel;
|
|
228
|
+
transcript;
|
|
229
|
+
emptyState;
|
|
230
|
+
dotsEl;
|
|
231
|
+
input;
|
|
232
|
+
sendBtn;
|
|
233
|
+
fab;
|
|
234
|
+
isOpen = false;
|
|
235
|
+
isSending = false;
|
|
236
|
+
core;
|
|
237
|
+
constructor(core) {
|
|
238
|
+
this.core = core;
|
|
239
|
+
this.host = document.createElement("div");
|
|
240
|
+
this.host.id = "guidekit-widget";
|
|
241
|
+
this.host.style.cssText = "position:fixed;z-index:2147483647;bottom:24px;right:24px;margin:0;padding:0;border:none;background:none;";
|
|
242
|
+
document.body.appendChild(this.host);
|
|
243
|
+
this.shadow = this.host.attachShadow({ mode: "open" });
|
|
244
|
+
const style = document.createElement("style");
|
|
245
|
+
style.textContent = WIDGET_CSS;
|
|
246
|
+
this.shadow.appendChild(style);
|
|
247
|
+
this.buildDOM();
|
|
248
|
+
this.bindEvents();
|
|
249
|
+
}
|
|
250
|
+
buildDOM() {
|
|
251
|
+
this.panel = document.createElement("div");
|
|
252
|
+
this.panel.className = "gk-panel";
|
|
253
|
+
this.panel.setAttribute("role", "dialog");
|
|
254
|
+
this.panel.setAttribute("aria-label", "GuideKit Assistant");
|
|
255
|
+
this.panel.setAttribute("aria-hidden", "true");
|
|
256
|
+
const header = document.createElement("div");
|
|
257
|
+
header.className = "gk-header";
|
|
258
|
+
const title = document.createElement("div");
|
|
259
|
+
title.className = "gk-header-title";
|
|
260
|
+
title.textContent = this.t("widgetTitle");
|
|
261
|
+
header.appendChild(title);
|
|
262
|
+
const closeBtn = document.createElement("button");
|
|
263
|
+
closeBtn.className = "gk-close-btn";
|
|
264
|
+
closeBtn.setAttribute("aria-label", this.t("closePanel"));
|
|
265
|
+
closeBtn.innerHTML = SVG_CLOSE;
|
|
266
|
+
closeBtn.addEventListener("click", () => this.togglePanel(false));
|
|
267
|
+
header.appendChild(closeBtn);
|
|
268
|
+
this.panel.appendChild(header);
|
|
269
|
+
this.transcript = document.createElement("div");
|
|
270
|
+
this.transcript.className = "gk-transcript";
|
|
271
|
+
this.transcript.setAttribute("role", "log");
|
|
272
|
+
this.transcript.setAttribute("aria-live", "polite");
|
|
273
|
+
this.emptyState = document.createElement("div");
|
|
274
|
+
this.emptyState.className = "gk-empty";
|
|
275
|
+
this.emptyState.textContent = this.t("emptyStateMessage");
|
|
276
|
+
this.transcript.appendChild(this.emptyState);
|
|
277
|
+
this.dotsEl = document.createElement("div");
|
|
278
|
+
this.dotsEl.className = "gk-dots";
|
|
279
|
+
this.dotsEl.setAttribute("role", "status");
|
|
280
|
+
this.dotsEl.setAttribute("aria-label", "Processing");
|
|
281
|
+
this.dotsEl.style.display = "none";
|
|
282
|
+
for (let i = 0; i < 3; i++) {
|
|
283
|
+
const dot = document.createElement("div");
|
|
284
|
+
dot.className = "gk-dot";
|
|
285
|
+
this.dotsEl.appendChild(dot);
|
|
286
|
+
}
|
|
287
|
+
this.transcript.appendChild(this.dotsEl);
|
|
288
|
+
this.panel.appendChild(this.transcript);
|
|
289
|
+
const inputArea = document.createElement("div");
|
|
290
|
+
inputArea.className = "gk-input-area";
|
|
291
|
+
this.input = document.createElement("textarea");
|
|
292
|
+
this.input.className = "gk-input";
|
|
293
|
+
this.input.placeholder = this.t("inputPlaceholder");
|
|
294
|
+
this.input.setAttribute("aria-label", this.t("sendMessage"));
|
|
295
|
+
this.input.rows = 1;
|
|
296
|
+
inputArea.appendChild(this.input);
|
|
297
|
+
this.sendBtn = document.createElement("button");
|
|
298
|
+
this.sendBtn.className = "gk-send-btn";
|
|
299
|
+
this.sendBtn.setAttribute("aria-label", this.t("sendMessage"));
|
|
300
|
+
this.sendBtn.innerHTML = SVG_SEND;
|
|
301
|
+
inputArea.appendChild(this.sendBtn);
|
|
302
|
+
this.panel.appendChild(inputArea);
|
|
303
|
+
this.shadow.appendChild(this.panel);
|
|
304
|
+
this.fab = document.createElement("button");
|
|
305
|
+
this.fab.className = "gk-fab";
|
|
306
|
+
this.fab.setAttribute("aria-label", this.t("openAssistant"));
|
|
307
|
+
this.fab.setAttribute("aria-expanded", "false");
|
|
308
|
+
this.fab.setAttribute("aria-haspopup", "dialog");
|
|
309
|
+
this.fab.innerHTML = SVG_CHAT;
|
|
310
|
+
this.shadow.appendChild(this.fab);
|
|
311
|
+
}
|
|
312
|
+
bindEvents() {
|
|
313
|
+
this.fab.addEventListener("click", () => this.togglePanel(!this.isOpen));
|
|
314
|
+
this.sendBtn.addEventListener("click", () => this.handleSend());
|
|
315
|
+
this.input.addEventListener("keydown", (e) => {
|
|
316
|
+
if (e.key === "Enter" && !e.shiftKey) {
|
|
317
|
+
e.preventDefault();
|
|
318
|
+
this.handleSend();
|
|
319
|
+
}
|
|
320
|
+
if (e.key === "Escape") {
|
|
321
|
+
this.togglePanel(false);
|
|
322
|
+
this.fab.focus();
|
|
323
|
+
}
|
|
324
|
+
});
|
|
325
|
+
}
|
|
326
|
+
togglePanel(open) {
|
|
327
|
+
this.isOpen = open;
|
|
328
|
+
if (open) {
|
|
329
|
+
this.panel.classList.add("gk-open");
|
|
330
|
+
this.panel.setAttribute("aria-hidden", "false");
|
|
331
|
+
this.fab.setAttribute("aria-expanded", "true");
|
|
332
|
+
this.fab.innerHTML = SVG_CLOSE;
|
|
333
|
+
this.fab.setAttribute("aria-label", this.t("closeAssistant"));
|
|
334
|
+
setTimeout(() => this.input.focus(), 100);
|
|
335
|
+
} else {
|
|
336
|
+
this.panel.classList.remove("gk-open");
|
|
337
|
+
this.panel.setAttribute("aria-hidden", "true");
|
|
338
|
+
this.fab.setAttribute("aria-expanded", "false");
|
|
339
|
+
this.fab.innerHTML = SVG_CHAT;
|
|
340
|
+
this.fab.setAttribute("aria-label", this.t("openAssistant"));
|
|
341
|
+
}
|
|
342
|
+
}
|
|
343
|
+
async handleSend() {
|
|
344
|
+
const text = this.input.value.trim();
|
|
345
|
+
if (!text || this.isSending) return;
|
|
346
|
+
this.isSending = true;
|
|
347
|
+
this.emptyState.style.display = "none";
|
|
348
|
+
this.addMessage("user", text);
|
|
349
|
+
this.input.value = "";
|
|
350
|
+
this.dotsEl.style.display = "flex";
|
|
351
|
+
this.scrollToBottom();
|
|
352
|
+
try {
|
|
353
|
+
const response = await this.core.sendText(text);
|
|
354
|
+
this.dotsEl.style.display = "none";
|
|
355
|
+
this.addMessage("assistant", response);
|
|
356
|
+
} catch (err) {
|
|
357
|
+
this.dotsEl.style.display = "none";
|
|
358
|
+
const msg = err instanceof Error ? err.message : "Something went wrong.";
|
|
359
|
+
this.addMessage("assistant", `Error: ${msg}`);
|
|
360
|
+
} finally {
|
|
361
|
+
this.isSending = false;
|
|
362
|
+
}
|
|
363
|
+
}
|
|
364
|
+
addMessage(role, content) {
|
|
365
|
+
const el = document.createElement("div");
|
|
366
|
+
el.className = `gk-msg gk-msg-${role}`;
|
|
367
|
+
el.textContent = content;
|
|
368
|
+
this.transcript.insertBefore(el, this.dotsEl);
|
|
369
|
+
this.scrollToBottom();
|
|
370
|
+
}
|
|
371
|
+
scrollToBottom() {
|
|
372
|
+
this.transcript.scrollTop = this.transcript.scrollHeight;
|
|
373
|
+
}
|
|
374
|
+
t(key) {
|
|
375
|
+
try {
|
|
376
|
+
return this.core.i18n.t(key) ?? key;
|
|
377
|
+
} catch {
|
|
378
|
+
return key;
|
|
379
|
+
}
|
|
380
|
+
}
|
|
381
|
+
destroy() {
|
|
382
|
+
this.host.remove();
|
|
383
|
+
}
|
|
384
|
+
};
|
|
385
|
+
var _core = null;
|
|
386
|
+
var _widget = null;
|
|
387
|
+
var _initialized = false;
|
|
388
|
+
async function init(options) {
|
|
389
|
+
if (_initialized && _core) return;
|
|
390
|
+
_core = new import_core.GuideKitCore({
|
|
391
|
+
tokenEndpoint: options.tokenEndpoint,
|
|
392
|
+
stt: options.stt,
|
|
393
|
+
tts: options.tts,
|
|
394
|
+
llm: options.llm,
|
|
395
|
+
agent: options.agent,
|
|
396
|
+
contentMap: options.contentMap,
|
|
397
|
+
options: options.options,
|
|
398
|
+
instanceId: options.instanceId,
|
|
399
|
+
rootElement: options.rootElement,
|
|
400
|
+
onError: options.onError,
|
|
401
|
+
onEvent: options.onEvent,
|
|
402
|
+
onReady: options.onReady
|
|
403
|
+
});
|
|
404
|
+
await _core.init();
|
|
405
|
+
if (!options.headless) {
|
|
406
|
+
_widget = new VanillaWidget(_core);
|
|
407
|
+
}
|
|
408
|
+
_initialized = true;
|
|
409
|
+
}
|
|
410
|
+
async function sendText(message) {
|
|
411
|
+
assertInitialized();
|
|
412
|
+
return _core.sendText(message);
|
|
413
|
+
}
|
|
414
|
+
function highlight(params) {
|
|
415
|
+
assertInitialized();
|
|
416
|
+
return _core.highlight(params);
|
|
417
|
+
}
|
|
418
|
+
function dismissHighlight() {
|
|
419
|
+
assertInitialized();
|
|
420
|
+
_core.dismissHighlight();
|
|
421
|
+
}
|
|
422
|
+
function scrollToSection(sectionId, offset) {
|
|
423
|
+
assertInitialized();
|
|
424
|
+
_core.scrollToSection(sectionId, offset);
|
|
425
|
+
}
|
|
426
|
+
function startTour(sectionIds, mode) {
|
|
427
|
+
assertInitialized();
|
|
428
|
+
_core.startTour(sectionIds, mode);
|
|
429
|
+
}
|
|
430
|
+
function stopTour() {
|
|
431
|
+
assertInitialized();
|
|
432
|
+
_core.stopTour();
|
|
433
|
+
}
|
|
434
|
+
async function navigate(href) {
|
|
435
|
+
assertInitialized();
|
|
436
|
+
return _core.navigate(href);
|
|
437
|
+
}
|
|
438
|
+
function setPageContext(context) {
|
|
439
|
+
assertInitialized();
|
|
440
|
+
_core.setPageContext(context);
|
|
441
|
+
}
|
|
442
|
+
function registerAction(actionId, action) {
|
|
443
|
+
assertInitialized();
|
|
444
|
+
_core.registerAction(actionId, action);
|
|
445
|
+
}
|
|
446
|
+
async function startListening() {
|
|
447
|
+
assertInitialized();
|
|
448
|
+
await _core.startListening();
|
|
449
|
+
}
|
|
450
|
+
function stopListening() {
|
|
451
|
+
assertInitialized();
|
|
452
|
+
_core.stopListening();
|
|
453
|
+
}
|
|
454
|
+
function getAgentState() {
|
|
455
|
+
assertInitialized();
|
|
456
|
+
return _core.agentState;
|
|
457
|
+
}
|
|
458
|
+
function getPageModel() {
|
|
459
|
+
assertInitialized();
|
|
460
|
+
return _core.pageModel;
|
|
461
|
+
}
|
|
462
|
+
function isReady() {
|
|
463
|
+
return _core?.isReady ?? false;
|
|
464
|
+
}
|
|
465
|
+
function getQuietMode() {
|
|
466
|
+
assertInitialized();
|
|
467
|
+
return _core.quietMode;
|
|
468
|
+
}
|
|
469
|
+
function setQuietMode(value) {
|
|
470
|
+
assertInitialized();
|
|
471
|
+
_core.quietMode = value;
|
|
472
|
+
}
|
|
473
|
+
async function checkHealth() {
|
|
474
|
+
assertInitialized();
|
|
475
|
+
return _core.checkHealth();
|
|
476
|
+
}
|
|
477
|
+
async function destroy() {
|
|
478
|
+
if (_widget) {
|
|
479
|
+
_widget.destroy();
|
|
480
|
+
_widget = null;
|
|
481
|
+
}
|
|
482
|
+
if (_core) {
|
|
483
|
+
await _core.destroy();
|
|
484
|
+
_core = null;
|
|
485
|
+
}
|
|
486
|
+
_initialized = false;
|
|
487
|
+
}
|
|
488
|
+
function getCore() {
|
|
489
|
+
return _core;
|
|
490
|
+
}
|
|
491
|
+
function assertInitialized() {
|
|
492
|
+
if (!_core || !_initialized) {
|
|
493
|
+
throw new Error(
|
|
494
|
+
"GuideKit not initialized. Call GuideKit.init({...}) first."
|
|
495
|
+
);
|
|
496
|
+
}
|
|
497
|
+
}
|
|
498
|
+
var VERSION = "0.1.0-beta.1";
|
|
499
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
500
|
+
0 && (module.exports = {
|
|
501
|
+
VERSION,
|
|
502
|
+
checkHealth,
|
|
503
|
+
destroy,
|
|
504
|
+
dismissHighlight,
|
|
505
|
+
getAgentState,
|
|
506
|
+
getCore,
|
|
507
|
+
getPageModel,
|
|
508
|
+
getQuietMode,
|
|
509
|
+
highlight,
|
|
510
|
+
init,
|
|
511
|
+
isReady,
|
|
512
|
+
navigate,
|
|
513
|
+
registerAction,
|
|
514
|
+
scrollToSection,
|
|
515
|
+
sendText,
|
|
516
|
+
setPageContext,
|
|
517
|
+
setQuietMode,
|
|
518
|
+
startListening,
|
|
519
|
+
startTour,
|
|
520
|
+
stopListening,
|
|
521
|
+
stopTour
|
|
522
|
+
});
|
|
523
|
+
//# sourceMappingURL=index.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["// ---------------------------------------------------------------------------\n// @guidekit/vanilla — Non-React IIFE bundle for script-tag integration\n// ---------------------------------------------------------------------------\n//\n// Provides an imperative API for using GuideKit without React. Users include\n// the script via a <script> tag and interact with the global `GuideKit` object.\n//\n// Usage:\n// <script src=\"https://cdn.jsdelivr.net/npm/@guidekit/vanilla/dist/index.global.js\"></script>\n// <script>\n// GuideKit.init({\n// llm: { provider: 'gemini', apiKey: '...' },\n// agent: { name: 'Guide', greeting: 'Hello!' },\n// });\n// </script>\n// ---------------------------------------------------------------------------\n\nimport { GuideKitCore } from '@guidekit/core';\nimport type {\n GuideKitCoreOptions,\n AgentState,\n GuideKitEvent,\n GuideKitErrorType,\n PageModel,\n HealthCheckResult,\n I18nStrings,\n} from '@guidekit/core';\n\n// ---------------------------------------------------------------------------\n// Widget DOM (lightweight, no React — plain DOM manipulation)\n// ---------------------------------------------------------------------------\n\nconst WIDGET_CSS = /* css */ `\n :host {\n --gk-primary: #6366f1;\n --gk-primary-hover: #4f46e5;\n --gk-bg: #ffffff;\n --gk-bg-secondary: #f8fafc;\n --gk-text: #1e293b;\n --gk-text-secondary: #64748b;\n --gk-border: #e2e8f0;\n --gk-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);\n --gk-radius: 16px;\n --gk-fab-size: 56px;\n --gk-panel-width: 380px;\n --gk-panel-height: 520px;\n --gk-font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n all: initial;\n font-family: var(--gk-font);\n position: fixed;\n z-index: 2147483647;\n bottom: 24px;\n right: 24px;\n }\n @media (prefers-reduced-motion: reduce) {\n *, *::before, *::after {\n animation-duration: 0.01ms !important;\n transition-duration: 0.01ms !important;\n }\n }\n .gk-fab {\n width: var(--gk-fab-size);\n height: var(--gk-fab-size);\n border-radius: 50%;\n border: none;\n background: var(--gk-primary);\n color: #fff;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n box-shadow: 0 4px 16px rgba(99, 102, 241, 0.35);\n transition: transform 0.2s ease, box-shadow 0.2s ease;\n outline: none;\n }\n .gk-fab:hover {\n background: var(--gk-primary-hover);\n transform: scale(1.05);\n }\n .gk-fab:focus-visible {\n outline: 2px solid var(--gk-primary);\n outline-offset: 3px;\n }\n .gk-fab svg { width: 24px; height: 24px; fill: currentColor; }\n .gk-panel {\n position: absolute;\n bottom: calc(var(--gk-fab-size) + 16px);\n right: 0;\n width: var(--gk-panel-width);\n height: var(--gk-panel-height);\n background: var(--gk-bg);\n border-radius: var(--gk-radius);\n box-shadow: var(--gk-shadow);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n opacity: 0;\n transform: translateY(12px) scale(0.95);\n pointer-events: none;\n transition: opacity 0.2s ease, transform 0.2s ease;\n }\n .gk-panel.gk-open {\n opacity: 1;\n transform: translateY(0) scale(1);\n pointer-events: auto;\n }\n .gk-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n border-bottom: 1px solid var(--gk-border);\n flex-shrink: 0;\n }\n .gk-header-title {\n font-size: 15px;\n font-weight: 600;\n color: var(--gk-text);\n margin: 0;\n }\n .gk-close-btn {\n width: 28px; height: 28px; border-radius: 8px;\n border: none; background: transparent; color: var(--gk-text-secondary);\n cursor: pointer; display: flex; align-items: center; justify-content: center;\n outline: none;\n }\n .gk-close-btn:hover { background: var(--gk-bg-secondary); color: var(--gk-text); }\n .gk-close-btn:focus-visible { outline: 2px solid var(--gk-primary); outline-offset: -2px; }\n .gk-close-btn svg { width: 16px; height: 16px; fill: currentColor; }\n .gk-transcript {\n flex: 1; overflow-y: auto; padding: 16px 20px;\n display: flex; flex-direction: column; gap: 12px; scroll-behavior: smooth;\n }\n .gk-empty {\n flex: 1; display: flex; flex-direction: column; align-items: center;\n justify-content: center; color: var(--gk-text-secondary); text-align: center;\n padding: 32px 16px; font-size: 13px;\n }\n .gk-msg {\n max-width: 85%; padding: 10px 14px; border-radius: 12px;\n font-size: 14px; line-height: 1.5; word-wrap: break-word; white-space: pre-wrap;\n }\n .gk-msg-user {\n align-self: flex-end; background: var(--gk-primary);\n color: #fff; border-bottom-right-radius: 4px;\n }\n .gk-msg-assistant {\n align-self: flex-start; background: var(--gk-bg-secondary);\n color: var(--gk-text); border-bottom-left-radius: 4px;\n }\n .gk-dots {\n align-self: flex-start; display: flex; gap: 4px; padding: 12px 16px;\n }\n .gk-dot {\n width: 6px; height: 6px; border-radius: 50%; background: var(--gk-text-secondary);\n animation: gk-bounce 1.4s ease-in-out infinite;\n }\n .gk-dot:nth-child(2) { animation-delay: 0.16s; }\n .gk-dot:nth-child(3) { animation-delay: 0.32s; }\n @keyframes gk-bounce {\n 0%, 80%, 100% { transform: translateY(0); }\n 40% { transform: translateY(-6px); }\n }\n .gk-input-area {\n display: flex; align-items: flex-end; gap: 8px;\n padding: 12px 16px; border-top: 1px solid var(--gk-border); flex-shrink: 0;\n }\n .gk-input {\n flex: 1; min-height: 40px; max-height: 120px; padding: 8px 14px;\n border: 1px solid var(--gk-border); border-radius: 12px;\n background: var(--gk-bg); color: var(--gk-text);\n font-family: var(--gk-font); font-size: 14px; line-height: 1.5;\n resize: none; outline: none;\n }\n .gk-input:focus { border-color: var(--gk-primary); box-shadow: 0 0 0 3px rgba(99,102,241,0.15); }\n .gk-send-btn {\n width: 40px; height: 40px; border-radius: 12px; border: none;\n background: var(--gk-primary); color: #fff; cursor: pointer;\n display: flex; align-items: center; justify-content: center; flex-shrink: 0;\n outline: none;\n }\n .gk-send-btn:hover:not(:disabled) { background: var(--gk-primary-hover); }\n .gk-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }\n .gk-send-btn:focus-visible { outline: 2px solid var(--gk-primary); outline-offset: 3px; }\n .gk-send-btn svg { width: 18px; height: 18px; fill: currentColor; }\n @media (hover: none) and (pointer: coarse), (max-width: 768px) {\n :host { bottom: 16px !important; right: 16px !important; }\n .gk-panel {\n position: fixed; bottom: 0; left: 0; right: 0;\n width: 100%; height: 70vh; max-height: 70vh;\n border-radius: var(--gk-radius) var(--gk-radius) 0 0;\n transform: translateY(100%);\n padding-bottom: env(safe-area-inset-bottom, 0px);\n }\n .gk-panel.gk-open { transform: translateY(0); }\n .gk-send-btn, .gk-close-btn { min-width: 44px; min-height: 44px; }\n .gk-input-area { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }\n }\n @media (forced-colors: active) {\n .gk-fab, .gk-send-btn { border: 2px solid ButtonText; }\n .gk-panel { border: 1px solid ButtonText; }\n }\n`;\n\nconst SVG_CHAT = '<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H5.17L4 17.17V4h16v12z\"/><path d=\"M7 9h10v2H7zm0-3h10v2H7z\"/></svg>';\nconst SVG_CLOSE = '<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"/></svg>';\nconst SVG_SEND = '<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M2.01 21L23 12 2.01 3 2 10l15 2-15 2z\"/></svg>';\n\n// ---------------------------------------------------------------------------\n// VanillaWidget — renders and manages the chat widget without React\n// ---------------------------------------------------------------------------\n\nclass VanillaWidget {\n private host: HTMLDivElement;\n private shadow: ShadowRoot;\n private panel!: HTMLDivElement;\n private transcript!: HTMLDivElement;\n private emptyState!: HTMLDivElement;\n private dotsEl!: HTMLDivElement;\n private input!: HTMLTextAreaElement;\n private sendBtn!: HTMLButtonElement;\n private fab!: HTMLButtonElement;\n private isOpen = false;\n private isSending = false;\n private core: GuideKitCore;\n\n constructor(core: GuideKitCore) {\n this.core = core;\n\n // Create Shadow DOM host\n this.host = document.createElement('div');\n this.host.id = 'guidekit-widget';\n this.host.style.cssText =\n 'position:fixed;z-index:2147483647;bottom:24px;right:24px;margin:0;padding:0;border:none;background:none;';\n document.body.appendChild(this.host);\n\n this.shadow = this.host.attachShadow({ mode: 'open' });\n\n // Inject styles\n const style = document.createElement('style');\n style.textContent = WIDGET_CSS;\n this.shadow.appendChild(style);\n\n this.buildDOM();\n this.bindEvents();\n }\n\n private buildDOM(): void {\n // Panel\n this.panel = document.createElement('div');\n this.panel.className = 'gk-panel';\n this.panel.setAttribute('role', 'dialog');\n this.panel.setAttribute('aria-label', 'GuideKit Assistant');\n this.panel.setAttribute('aria-hidden', 'true');\n\n // Header\n const header = document.createElement('div');\n header.className = 'gk-header';\n\n const title = document.createElement('div');\n title.className = 'gk-header-title';\n title.textContent = this.t('widgetTitle');\n header.appendChild(title);\n\n const closeBtn = document.createElement('button');\n closeBtn.className = 'gk-close-btn';\n closeBtn.setAttribute('aria-label', this.t('closePanel'));\n closeBtn.innerHTML = SVG_CLOSE;\n closeBtn.addEventListener('click', () => this.togglePanel(false));\n header.appendChild(closeBtn);\n\n this.panel.appendChild(header);\n\n // Transcript\n this.transcript = document.createElement('div');\n this.transcript.className = 'gk-transcript';\n this.transcript.setAttribute('role', 'log');\n this.transcript.setAttribute('aria-live', 'polite');\n\n this.emptyState = document.createElement('div');\n this.emptyState.className = 'gk-empty';\n this.emptyState.textContent = this.t('emptyStateMessage');\n this.transcript.appendChild(this.emptyState);\n\n // Dots indicator (hidden by default)\n this.dotsEl = document.createElement('div');\n this.dotsEl.className = 'gk-dots';\n this.dotsEl.setAttribute('role', 'status');\n this.dotsEl.setAttribute('aria-label', 'Processing');\n this.dotsEl.style.display = 'none';\n for (let i = 0; i < 3; i++) {\n const dot = document.createElement('div');\n dot.className = 'gk-dot';\n this.dotsEl.appendChild(dot);\n }\n this.transcript.appendChild(this.dotsEl);\n\n this.panel.appendChild(this.transcript);\n\n // Input area\n const inputArea = document.createElement('div');\n inputArea.className = 'gk-input-area';\n\n this.input = document.createElement('textarea');\n this.input.className = 'gk-input';\n this.input.placeholder = this.t('inputPlaceholder');\n this.input.setAttribute('aria-label', this.t('sendMessage'));\n this.input.rows = 1;\n inputArea.appendChild(this.input);\n\n this.sendBtn = document.createElement('button');\n this.sendBtn.className = 'gk-send-btn';\n this.sendBtn.setAttribute('aria-label', this.t('sendMessage'));\n this.sendBtn.innerHTML = SVG_SEND;\n inputArea.appendChild(this.sendBtn);\n\n this.panel.appendChild(inputArea);\n this.shadow.appendChild(this.panel);\n\n // FAB\n this.fab = document.createElement('button');\n this.fab.className = 'gk-fab';\n this.fab.setAttribute('aria-label', this.t('openAssistant'));\n this.fab.setAttribute('aria-expanded', 'false');\n this.fab.setAttribute('aria-haspopup', 'dialog');\n this.fab.innerHTML = SVG_CHAT;\n this.shadow.appendChild(this.fab);\n }\n\n private bindEvents(): void {\n this.fab.addEventListener('click', () => this.togglePanel(!this.isOpen));\n\n this.sendBtn.addEventListener('click', () => this.handleSend());\n\n this.input.addEventListener('keydown', (e) => {\n if (e.key === 'Enter' && !e.shiftKey) {\n e.preventDefault();\n this.handleSend();\n }\n if (e.key === 'Escape') {\n this.togglePanel(false);\n this.fab.focus();\n }\n });\n }\n\n private togglePanel(open: boolean): void {\n this.isOpen = open;\n if (open) {\n this.panel.classList.add('gk-open');\n this.panel.setAttribute('aria-hidden', 'false');\n this.fab.setAttribute('aria-expanded', 'true');\n this.fab.innerHTML = SVG_CLOSE;\n this.fab.setAttribute('aria-label', this.t('closeAssistant'));\n setTimeout(() => this.input.focus(), 100);\n } else {\n this.panel.classList.remove('gk-open');\n this.panel.setAttribute('aria-hidden', 'true');\n this.fab.setAttribute('aria-expanded', 'false');\n this.fab.innerHTML = SVG_CHAT;\n this.fab.setAttribute('aria-label', this.t('openAssistant'));\n }\n }\n\n private async handleSend(): Promise<void> {\n const text = this.input.value.trim();\n if (!text || this.isSending) return;\n\n this.isSending = true;\n\n // Hide empty state\n this.emptyState.style.display = 'none';\n\n // Add user message\n this.addMessage('user', text);\n this.input.value = '';\n\n // Show processing dots\n this.dotsEl.style.display = 'flex';\n this.scrollToBottom();\n\n try {\n const response = await this.core.sendText(text);\n this.dotsEl.style.display = 'none';\n this.addMessage('assistant', response);\n } catch (err) {\n this.dotsEl.style.display = 'none';\n const msg = err instanceof Error ? err.message : 'Something went wrong.';\n this.addMessage('assistant', `Error: ${msg}`);\n } finally {\n this.isSending = false;\n }\n }\n\n private addMessage(role: 'user' | 'assistant', content: string): void {\n const el = document.createElement('div');\n el.className = `gk-msg gk-msg-${role}`;\n el.textContent = content;\n // Insert before the dots element\n this.transcript.insertBefore(el, this.dotsEl);\n this.scrollToBottom();\n }\n\n private scrollToBottom(): void {\n this.transcript.scrollTop = this.transcript.scrollHeight;\n }\n\n private t(key: string): string {\n try {\n return this.core.i18n.t(key as keyof I18nStrings) ?? key;\n } catch {\n return key;\n }\n }\n\n destroy(): void {\n this.host.remove();\n }\n}\n\n// ---------------------------------------------------------------------------\n// GuideKitVanilla — imperative wrapper around GuideKitCore\n// ---------------------------------------------------------------------------\n\nexport interface GuideKitVanillaOptions {\n tokenEndpoint?: string;\n stt?: GuideKitCoreOptions['stt'];\n tts?: GuideKitCoreOptions['tts'];\n llm?: GuideKitCoreOptions['llm'];\n agent?: GuideKitCoreOptions['agent'];\n contentMap?: GuideKitCoreOptions['contentMap'];\n options?: GuideKitCoreOptions['options'];\n instanceId?: string;\n rootElement?: HTMLElement;\n /** Disable the built-in widget UI (for headless use). */\n headless?: boolean;\n onError?: (error: GuideKitErrorType) => void;\n onEvent?: (event: GuideKitEvent) => void;\n onReady?: () => void;\n}\n\n/** Singleton state */\nlet _core: GuideKitCore | null = null;\nlet _widget: VanillaWidget | null = null;\nlet _initialized = false;\n\n/**\n * Initialize GuideKit. Must be called before any other methods.\n * Idempotent — calling multiple times is safe (returns existing instance).\n */\nexport async function init(options: GuideKitVanillaOptions): Promise<void> {\n if (_initialized && _core) return;\n\n _core = new GuideKitCore({\n tokenEndpoint: options.tokenEndpoint,\n stt: options.stt,\n tts: options.tts,\n llm: options.llm,\n agent: options.agent,\n contentMap: options.contentMap,\n options: options.options,\n instanceId: options.instanceId,\n rootElement: options.rootElement,\n onError: options.onError,\n onEvent: options.onEvent,\n onReady: options.onReady,\n });\n\n await _core.init();\n\n // Create widget unless headless\n if (!options.headless) {\n _widget = new VanillaWidget(_core);\n }\n\n _initialized = true;\n}\n\n/**\n * Send a text message to the assistant. Returns the response.\n */\nexport async function sendText(message: string): Promise<string> {\n assertInitialized();\n return _core!.sendText(message);\n}\n\n/**\n * Highlight an element on the page.\n */\nexport function highlight(params: {\n sectionId?: string;\n selector?: string;\n tooltip?: string;\n position?: 'top' | 'bottom' | 'left' | 'right' | 'auto';\n}): boolean {\n assertInitialized();\n return _core!.highlight(params);\n}\n\n/** Dismiss the current spotlight highlight. */\nexport function dismissHighlight(): void {\n assertInitialized();\n _core!.dismissHighlight();\n}\n\n/** Smooth scroll to a section by ID. */\nexport function scrollToSection(sectionId: string, offset?: number): void {\n assertInitialized();\n _core!.scrollToSection(sectionId, offset);\n}\n\n/** Start a guided tour. */\nexport function startTour(sectionIds: string[], mode?: 'auto' | 'manual'): void {\n assertInitialized();\n _core!.startTour(sectionIds, mode);\n}\n\n/** Stop the current tour. */\nexport function stopTour(): void {\n assertInitialized();\n _core!.stopTour();\n}\n\n/** Navigate to a URL (same-origin only). */\nexport async function navigate(href: string): Promise<boolean> {\n assertInitialized();\n return _core!.navigate(href);\n}\n\n/** Set developer page context for the LLM. */\nexport function setPageContext(context: Record<string, unknown>): void {\n assertInitialized();\n _core!.setPageContext(context);\n}\n\n/** Register a custom action the LLM can invoke. */\nexport function registerAction(\n actionId: string,\n action: {\n description: string;\n parameters: Record<string, unknown>;\n handler: (params: Record<string, unknown>) => Promise<unknown>;\n },\n): void {\n assertInitialized();\n _core!.registerAction(actionId, action);\n}\n\n/** Start voice input. */\nexport async function startListening(): Promise<void> {\n assertInitialized();\n await _core!.startListening();\n}\n\n/** Stop voice input. */\nexport function stopListening(): void {\n assertInitialized();\n _core!.stopListening();\n}\n\n/** Get current agent state. */\nexport function getAgentState(): AgentState {\n assertInitialized();\n return _core!.agentState;\n}\n\n/** Get current page model. */\nexport function getPageModel(): PageModel | null {\n assertInitialized();\n return _core!.pageModel;\n}\n\n/** Whether the SDK is ready. */\nexport function isReady(): boolean {\n return _core?.isReady ?? false;\n}\n\n/** Get/set quiet mode. */\nexport function getQuietMode(): boolean {\n assertInitialized();\n return _core!.quietMode;\n}\n\nexport function setQuietMode(value: boolean): void {\n assertInitialized();\n _core!.quietMode = value;\n}\n\n/** Check health of all connected services. */\nexport async function checkHealth(): Promise<HealthCheckResult> {\n assertInitialized();\n return _core!.checkHealth();\n}\n\n/** Destroy the instance and clean up. */\nexport async function destroy(): Promise<void> {\n if (_widget) {\n _widget.destroy();\n _widget = null;\n }\n if (_core) {\n await _core.destroy();\n _core = null;\n }\n _initialized = false;\n}\n\n/** Get the underlying GuideKitCore instance (escape hatch). */\nexport function getCore(): GuideKitCore | null {\n return _core;\n}\n\n// ---------------------------------------------------------------------------\n// Internal\n// ---------------------------------------------------------------------------\n\nfunction assertInitialized(): void {\n if (!_core || !_initialized) {\n throw new Error(\n 'GuideKit not initialized. Call GuideKit.init({...}) first.',\n );\n }\n}\n\n// ---------------------------------------------------------------------------\n// Version\n// ---------------------------------------------------------------------------\n\nexport const VERSION = '0.1.0-beta.1';\n"],"mappings":"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","names":[]}
|