@xpert-ai/chatkit-web-component 0.0.3 → 0.1.0
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 +5 -168
- package/dist/xpert-chatkit.js +86 -78
- package/dist/xpert-chatkit.js.map +1 -1
- package/dist/xpert-chatkit.umd.cjs +98 -90
- package/dist/xpert-chatkit.umd.cjs.map +1 -1
- package/package.json +18 -11
- package/LICENSE +0 -201
package/README.md
CHANGED
|
@@ -1,172 +1,9 @@
|
|
|
1
1
|
# Xpert Chatkit Web Component
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
This package ships the ChatKit Web Component for embedding ChatKit in any web page.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Role in the ChatKit project
|
|
6
6
|
|
|
7
|
-
-
|
|
8
|
-
-
|
|
9
|
-
-
|
|
10
|
-
- 🔒 Secure session management
|
|
11
|
-
- ⚡ Loading and error states built-in
|
|
12
|
-
- 🌐 Works with any framework (React, Vue, Angular, vanilla JS)
|
|
13
|
-
|
|
14
|
-
## Installation
|
|
15
|
-
|
|
16
|
-
```bash
|
|
17
|
-
npm install @xpert-ai/chatkit-web-component
|
|
18
|
-
```
|
|
19
|
-
|
|
20
|
-
Or use via CDN:
|
|
21
|
-
|
|
22
|
-
```html
|
|
23
|
-
<script src="https://unpkg.com/@xpert-ai/chatkit-web-component/dist/xpert-chatkit.js"></script>
|
|
24
|
-
```
|
|
25
|
-
|
|
26
|
-
## Usage
|
|
27
|
-
|
|
28
|
-
### Basic Example
|
|
29
|
-
|
|
30
|
-
```html
|
|
31
|
-
<!DOCTYPE html>
|
|
32
|
-
<html>
|
|
33
|
-
<head>
|
|
34
|
-
<script src="https://unpkg.com/@xpert-ai/chatkit-web-component/dist/xpert-chatkit.js"></script>
|
|
35
|
-
<style>
|
|
36
|
-
xpert-chatkit {
|
|
37
|
-
width: 100%;
|
|
38
|
-
height: 600px;
|
|
39
|
-
}
|
|
40
|
-
</style>
|
|
41
|
-
</head>
|
|
42
|
-
<body>
|
|
43
|
-
<xpert-chatkit
|
|
44
|
-
backend-url="https://your-backend.com"
|
|
45
|
-
chatkit-url="https://chatkit.xpert.ai"
|
|
46
|
-
assistant-id="assistant_123">
|
|
47
|
-
</xpert-chatkit>
|
|
48
|
-
</body>
|
|
49
|
-
</html>
|
|
50
|
-
```
|
|
51
|
-
|
|
52
|
-
### With Style Configuration
|
|
53
|
-
|
|
54
|
-
```html
|
|
55
|
-
<xpert-chatkit
|
|
56
|
-
backend-url="https://your-backend.com"
|
|
57
|
-
chatkit-url="https://chatkit.xpert.ai"
|
|
58
|
-
assistant-id="assistant_123"
|
|
59
|
-
style-config='{"primaryColor": "#007bff", "fontSize": "14px"}'>
|
|
60
|
-
</xpert-chatkit>
|
|
61
|
-
```
|
|
62
|
-
|
|
63
|
-
### Programmatic Usage
|
|
64
|
-
|
|
65
|
-
```javascript
|
|
66
|
-
import '@xpert-ai/chatkit-web-component';
|
|
67
|
-
|
|
68
|
-
// Create element
|
|
69
|
-
const chatkit = document.createElement('xpert-chatkit');
|
|
70
|
-
chatkit.setAttribute('backend-url', 'https://your-backend.com');
|
|
71
|
-
chatkit.setAttribute('chatkit-url', 'https://chatkit.xpert.ai');
|
|
72
|
-
chatkit.setAttribute('assistant-id', 'assistant_123');
|
|
73
|
-
|
|
74
|
-
// Update style config
|
|
75
|
-
chatkit.updateStyleConfig({
|
|
76
|
-
primaryColor: '#007bff',
|
|
77
|
-
fontSize: '14px'
|
|
78
|
-
});
|
|
79
|
-
|
|
80
|
-
document.body.appendChild(chatkit);
|
|
81
|
-
```
|
|
82
|
-
|
|
83
|
-
## Attributes
|
|
84
|
-
|
|
85
|
-
| Attribute | Required | Description |
|
|
86
|
-
|-----------|----------|-------------|
|
|
87
|
-
| `backend-url` | Yes | Backend API URL for session creation |
|
|
88
|
-
| `chatkit-url` | Yes | Chatkit iframe URL |
|
|
89
|
-
| `assistant-id` | No | Assistant ID to use |
|
|
90
|
-
| `style-config` | No | JSON string for style configuration |
|
|
91
|
-
|
|
92
|
-
## Methods
|
|
93
|
-
|
|
94
|
-
### `updateStyleConfig(config: Record<string, unknown>)`
|
|
95
|
-
|
|
96
|
-
Updates the style configuration. Note: Currently only applied on initial load.
|
|
97
|
-
|
|
98
|
-
```javascript
|
|
99
|
-
const chatkit = document.querySelector('xpert-chatkit');
|
|
100
|
-
chatkit.updateStyleConfig({
|
|
101
|
-
primaryColor: '#ff0000',
|
|
102
|
-
borderRadius: '8px'
|
|
103
|
-
});
|
|
104
|
-
```
|
|
105
|
-
|
|
106
|
-
## Styling
|
|
107
|
-
|
|
108
|
-
The component automatically fills its container. You can control its size with CSS:
|
|
109
|
-
|
|
110
|
-
```css
|
|
111
|
-
xpert-chatkit {
|
|
112
|
-
width: 100%;
|
|
113
|
-
height: 100vh;
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
/* Or fixed size */
|
|
117
|
-
xpert-chatkit {
|
|
118
|
-
width: 400px;
|
|
119
|
-
height: 600px;
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
/* In a flex/grid container */
|
|
123
|
-
.container {
|
|
124
|
-
display: flex;
|
|
125
|
-
height: 100vh;
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
xpert-chatkit {
|
|
129
|
-
flex: 1;
|
|
130
|
-
}
|
|
131
|
-
```
|
|
132
|
-
|
|
133
|
-
## Error Handling
|
|
134
|
-
|
|
135
|
-
The component displays loading and error states automatically:
|
|
136
|
-
- Shows "Creating session..." while fetching client secret
|
|
137
|
-
- Shows error message if session creation fails
|
|
138
|
-
- Logs errors to console with `[xpert-chatkit]` prefix
|
|
139
|
-
|
|
140
|
-
## Browser Support
|
|
141
|
-
|
|
142
|
-
- Chrome/Edge 54+
|
|
143
|
-
- Firefox 63+
|
|
144
|
-
- Safari 10.1+
|
|
145
|
-
- All modern browsers with Custom Elements v1 support
|
|
146
|
-
|
|
147
|
-
For older browsers, you may need the [Web Components polyfill](https://github.com/webcomponents/polyfills).
|
|
148
|
-
|
|
149
|
-
## Development
|
|
150
|
-
|
|
151
|
-
```bash
|
|
152
|
-
# Install dependencies
|
|
153
|
-
npm install
|
|
154
|
-
|
|
155
|
-
# Start development server (recommended)
|
|
156
|
-
npm run serve
|
|
157
|
-
|
|
158
|
-
# Build for production
|
|
159
|
-
npm run build
|
|
160
|
-
|
|
161
|
-
# Watch mode (build on change)
|
|
162
|
-
npm run dev
|
|
163
|
-
|
|
164
|
-
# Type check
|
|
165
|
-
npm run type-check
|
|
166
|
-
```
|
|
167
|
-
|
|
168
|
-
For detailed development instructions, see [DEVELOPMENT.md](./DEVELOPMENT.md).
|
|
169
|
-
|
|
170
|
-
## License
|
|
171
|
-
|
|
172
|
-
MIT
|
|
7
|
+
- Exposes a framework-agnostic custom element for integrating ChatKit.
|
|
8
|
+
- Manages the iframe lifecycle and wiring between the host page and the ChatKit UI.
|
|
9
|
+
- Serves as the primary distribution artifact for non-React web integrations.
|
package/dist/xpert-chatkit.js
CHANGED
|
@@ -40,17 +40,14 @@ var __decorateElement = (array, flags, name, decorators, target, extra) => {
|
|
|
40
40
|
}
|
|
41
41
|
return k || __decoratorMetadata(array, target), desc && __defProp(target, name, desc), p ? k ^ 4 ? extra : desc : target;
|
|
42
42
|
};
|
|
43
|
+
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
43
44
|
var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
|
|
44
45
|
var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError('Cannot use the "in" operator on this value') : member.has(obj);
|
|
45
46
|
var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
|
|
46
47
|
var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
|
|
47
48
|
var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
|
|
48
49
|
var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
|
|
49
|
-
var _setTrainingOptOut_dec, _hideHistory_dec, _showHistory_dec, _sendCustomAction_dec, _shareThread_dec, _setThreadId_dec, _setComposerValue_dec, _sendUserMessage_dec, _fetchUpdates_dec, _focusComposer_dec,
|
|
50
|
-
var __defProp2 = Object.defineProperty;
|
|
51
|
-
var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
52
|
-
var __publicField = (obj, key, value) => __defNormalProp2(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
53
|
-
var _a, _b;
|
|
50
|
+
var _a, _b, _setTrainingOptOut_dec, _hideHistory_dec, _showHistory_dec, _sendCustomAction_dec, _shareThread_dec, _setThreadId_dec, _setComposerValue_dec, _sendUserMessage_dec, _fetchUpdates_dec, _focusComposer_dec, _c, _opts, _frameUrl, _frame, _wrapper, _shadow, _resolveLoaded, _loaded, _messenger, _ChatKitElementBase_instances, emitAndThrow_fn, setOptionsDataAttributes_fn, getFrameUrl_fn, setFrameUrl_fn, consumeFrameUrl_fn, _handleFrameLoad, _initialized, maybeInit_fn, _init;
|
|
54
51
|
class EventEmitter {
|
|
55
52
|
constructor() {
|
|
56
53
|
__publicField(this, "callbacks", /* @__PURE__ */ new Map());
|
|
@@ -62,16 +59,16 @@ class EventEmitter {
|
|
|
62
59
|
this.callbacks.get(event).add(callback);
|
|
63
60
|
}
|
|
64
61
|
emit(event, ...args) {
|
|
65
|
-
var
|
|
62
|
+
var _a2;
|
|
66
63
|
const data = args[0];
|
|
67
|
-
(
|
|
64
|
+
(_a2 = this.callbacks.get(event)) == null ? void 0 : _a2.forEach((callback) => callback(data));
|
|
68
65
|
}
|
|
69
66
|
off(event, callback) {
|
|
70
|
-
var
|
|
67
|
+
var _a2;
|
|
71
68
|
if (!callback) {
|
|
72
69
|
this.callbacks.delete(event);
|
|
73
70
|
} else {
|
|
74
|
-
(
|
|
71
|
+
(_a2 = this.callbacks.get(event)) == null ? void 0 : _a2.delete(callback);
|
|
75
72
|
}
|
|
76
73
|
}
|
|
77
74
|
allOff() {
|
|
@@ -196,8 +193,8 @@ var __rest = function(s, e) {
|
|
|
196
193
|
const EventStreamContentType = "text/event-stream";
|
|
197
194
|
const DefaultRetryInterval = 1e3;
|
|
198
195
|
const LastEventId = "last-event-id";
|
|
199
|
-
function fetchEventSource(input,
|
|
200
|
-
var { signal: inputSignal, headers: inputHeaders, onopen: inputOnOpen, onmessage, onclose, onerror, openWhenHidden, fetch: inputFetch } =
|
|
196
|
+
function fetchEventSource(input, _a2) {
|
|
197
|
+
var { signal: inputSignal, headers: inputHeaders, onopen: inputOnOpen, onmessage, onclose, onerror, openWhenHidden, fetch: inputFetch } = _a2, rest = __rest(_a2, ["signal", "headers", "onopen", "onmessage", "onclose", "onerror", "openWhenHidden", "fetch"]);
|
|
201
198
|
return new Promise((resolve, reject) => {
|
|
202
199
|
const headers = Object.assign({}, inputHeaders);
|
|
203
200
|
if (!headers.accept) {
|
|
@@ -299,7 +296,7 @@ class HttpError extends Error {
|
|
|
299
296
|
}
|
|
300
297
|
}
|
|
301
298
|
_a = FRAME_SAFE_ERROR_KEY;
|
|
302
|
-
const _FrameSafeHttpError = class
|
|
299
|
+
const _FrameSafeHttpError = class _FrameSafeHttpError {
|
|
303
300
|
constructor(message, res, metadata) {
|
|
304
301
|
__publicField(this, _a, "HttpError");
|
|
305
302
|
__publicField(this, "message");
|
|
@@ -314,7 +311,7 @@ const _FrameSafeHttpError = class _FrameSafeHttpError2 {
|
|
|
314
311
|
this.metadata = metadata;
|
|
315
312
|
}
|
|
316
313
|
static fromHttpError(error) {
|
|
317
|
-
return new
|
|
314
|
+
return new _FrameSafeHttpError(
|
|
318
315
|
error.message,
|
|
319
316
|
{
|
|
320
317
|
status: error.status,
|
|
@@ -344,9 +341,9 @@ const fetchEventSourceWithRetry = async (url, params) => {
|
|
|
344
341
|
await fetchEventSource(url, {
|
|
345
342
|
...restParams,
|
|
346
343
|
onopen: async (res) => {
|
|
347
|
-
var
|
|
344
|
+
var _a2;
|
|
348
345
|
onopen == null ? void 0 : onopen(res);
|
|
349
|
-
if (res.ok && ((
|
|
346
|
+
if (res.ok && ((_a2 = res.headers.get("content-type")) == null ? void 0 : _a2.startsWith("text/event-stream"))) {
|
|
350
347
|
retryAttempt = 0;
|
|
351
348
|
return;
|
|
352
349
|
}
|
|
@@ -434,8 +431,7 @@ class BaseMessenger {
|
|
|
434
431
|
}
|
|
435
432
|
));
|
|
436
433
|
__publicField(this, "handleMessage", async (event) => {
|
|
437
|
-
var
|
|
438
|
-
console.log("Received message", event.data, event.origin, this.targetOrigin, event.source, this.target());
|
|
434
|
+
var _a2, _b2, _c2, _d;
|
|
439
435
|
if (!event.data || event.data.__xpaiChatKit !== true || event.origin !== this.targetOrigin || event.source !== this.target()) {
|
|
440
436
|
return;
|
|
441
437
|
}
|
|
@@ -508,7 +504,6 @@ class BaseMessenger {
|
|
|
508
504
|
break;
|
|
509
505
|
}
|
|
510
506
|
case "command": {
|
|
511
|
-
console.log("Received command", data.command, data.data);
|
|
512
507
|
if (!this.canReceiveCommand(data.command)) {
|
|
513
508
|
this.sendMessage({
|
|
514
509
|
type: "response",
|
|
@@ -518,7 +513,7 @@ class BaseMessenger {
|
|
|
518
513
|
return;
|
|
519
514
|
}
|
|
520
515
|
try {
|
|
521
|
-
const response = await ((_b2 = (
|
|
516
|
+
const response = await ((_b2 = (_a2 = this.commandHandlers)[data.command]) == null ? void 0 : _b2.call(_a2, data.data));
|
|
522
517
|
this.sendMessage({
|
|
523
518
|
type: "response",
|
|
524
519
|
response,
|
|
@@ -562,7 +557,7 @@ class BaseMessenger {
|
|
|
562
557
|
console.error("No handler found for nonce", data.nonce);
|
|
563
558
|
return;
|
|
564
559
|
}
|
|
565
|
-
(_d = (
|
|
560
|
+
(_d = (_c2 = this.fetchEventSourceHandlers.get(data.nonce)) == null ? void 0 : _c2.onmessage) == null ? void 0 : _d.call(_c2, data.message);
|
|
566
561
|
break;
|
|
567
562
|
}
|
|
568
563
|
case "abortSignal": {
|
|
@@ -584,12 +579,12 @@ class BaseMessenger {
|
|
|
584
579
|
this.targetOrigin = targetOrigin;
|
|
585
580
|
}
|
|
586
581
|
sendMessage(data, transfer) {
|
|
587
|
-
var
|
|
582
|
+
var _a2;
|
|
588
583
|
const message = {
|
|
589
584
|
__xpaiChatKit: true,
|
|
590
585
|
...data
|
|
591
586
|
};
|
|
592
|
-
(
|
|
587
|
+
(_a2 = this.target()) == null ? void 0 : _a2.postMessage(message, this.targetOrigin, transfer);
|
|
593
588
|
}
|
|
594
589
|
connect() {
|
|
595
590
|
window.addEventListener("message", this.handleMessage);
|
|
@@ -611,11 +606,11 @@ class BaseMessenger {
|
|
|
611
606
|
}
|
|
612
607
|
if (params.signal) {
|
|
613
608
|
params.signal.addEventListener("abort", () => {
|
|
614
|
-
var
|
|
609
|
+
var _a2;
|
|
615
610
|
this.sendMessage({
|
|
616
611
|
type: "abortSignal",
|
|
617
612
|
nonce,
|
|
618
|
-
reason: (
|
|
613
|
+
reason: (_a2 = params.signal) == null ? void 0 : _a2.reason
|
|
619
614
|
});
|
|
620
615
|
});
|
|
621
616
|
params.signal = void 0;
|
|
@@ -888,7 +883,7 @@ function requireCommandCapability(value, context) {
|
|
|
888
883
|
return value.apply(this, args);
|
|
889
884
|
};
|
|
890
885
|
}
|
|
891
|
-
class ChatKitElementBase extends (
|
|
886
|
+
class ChatKitElementBase extends (_c = HTMLElement, _focusComposer_dec = [requireCommandCapability], _fetchUpdates_dec = [requireCommandCapability], _sendUserMessage_dec = [requireCommandCapability], _setComposerValue_dec = [requireCommandCapability], _setThreadId_dec = [requireCommandCapability], _shareThread_dec = [requireCommandCapability], _sendCustomAction_dec = [requireCommandCapability], _showHistory_dec = [requireCommandCapability], _hideHistory_dec = [requireCommandCapability], _setTrainingOptOut_dec = [requireCommandCapability], _c) {
|
|
892
887
|
constructor({ profile }) {
|
|
893
888
|
super();
|
|
894
889
|
__runInitializers(_init, 5, this);
|
|
@@ -904,17 +899,19 @@ class ChatKitElementBase extends (_a2 = HTMLElement, _focusComposer_dec = [requi
|
|
|
904
899
|
}));
|
|
905
900
|
__privateAdd(this, _messenger, new ChatFrameMessenger({
|
|
906
901
|
fetch: (...args) => {
|
|
907
|
-
var
|
|
908
|
-
const customFetch = ((
|
|
902
|
+
var _a2;
|
|
903
|
+
const customFetch = ((_a2 = __privateGet(this, _opts)) == null ? void 0 : _a2.api) && "fetch" in __privateGet(this, _opts).api && __privateGet(this, _opts).api.fetch;
|
|
909
904
|
return customFetch ? customFetch(...args) : fetch(...args);
|
|
910
905
|
},
|
|
911
906
|
target: () => {
|
|
912
|
-
var
|
|
913
|
-
return ((
|
|
907
|
+
var _a2;
|
|
908
|
+
return ((_a2 = __privateGet(this, _frame)) == null ? void 0 : _a2.contentWindow) ?? null;
|
|
914
909
|
},
|
|
915
910
|
targetOrigin: window.location.origin,
|
|
916
911
|
handlers: {
|
|
917
|
-
onFileInputClick: ({
|
|
912
|
+
onFileInputClick: ({
|
|
913
|
+
inputAttributes
|
|
914
|
+
}) => {
|
|
918
915
|
return new Promise((resolve) => {
|
|
919
916
|
const input = document.createElement("input");
|
|
920
917
|
for (const [key, value] of Object.entries(inputAttributes)) {
|
|
@@ -938,8 +935,8 @@ class ChatKitElementBase extends (_a2 = HTMLElement, _focusComposer_dec = [requi
|
|
|
938
935
|
id,
|
|
939
936
|
tool_call_id
|
|
940
937
|
}) => {
|
|
941
|
-
var
|
|
942
|
-
const onClientTool = (
|
|
938
|
+
var _a2;
|
|
939
|
+
const onClientTool = (_a2 = __privateGet(this, _opts)) == null ? void 0 : _a2.onClientTool;
|
|
943
940
|
if (!onClientTool) {
|
|
944
941
|
__privateMethod(this, _ChatKitElementBase_instances, emitAndThrow_fn).call(this, new IntegrationError2(
|
|
945
942
|
`No handler for client tool calls. You'll need to add onClientTool to your ChatKit options.`
|
|
@@ -947,9 +944,12 @@ class ChatKitElementBase extends (_a2 = HTMLElement, _focusComposer_dec = [requi
|
|
|
947
944
|
}
|
|
948
945
|
return onClientTool({ name, params, id, tool_call_id });
|
|
949
946
|
},
|
|
950
|
-
onWidgetAction: async ({
|
|
951
|
-
|
|
952
|
-
|
|
947
|
+
onWidgetAction: async ({
|
|
948
|
+
action,
|
|
949
|
+
widgetItem
|
|
950
|
+
}) => {
|
|
951
|
+
var _a2, _b2;
|
|
952
|
+
const onAction = (_b2 = (_a2 = __privateGet(this, _opts)) == null ? void 0 : _a2.widgets) == null ? void 0 : _b2.onAction;
|
|
953
953
|
if (!onAction) {
|
|
954
954
|
__privateMethod(this, _ChatKitElementBase_instances, emitAndThrow_fn).call(this, new IntegrationError2(
|
|
955
955
|
`No handler for widget actions. You'll need to add widgets.onAction to your ChatKit options.`
|
|
@@ -958,16 +958,16 @@ class ChatKitElementBase extends (_a2 = HTMLElement, _focusComposer_dec = [requi
|
|
|
958
958
|
return onAction(action, widgetItem);
|
|
959
959
|
},
|
|
960
960
|
onEntitySearch: async ({ query }) => {
|
|
961
|
-
var
|
|
962
|
-
return ((
|
|
961
|
+
var _a2, _b2, _c2;
|
|
962
|
+
return ((_c2 = (_b2 = (_a2 = __privateGet(this, _opts)) == null ? void 0 : _a2.entities) == null ? void 0 : _b2.onTagSearch) == null ? void 0 : _c2.call(_b2, query)) ?? [];
|
|
963
963
|
},
|
|
964
964
|
onEntityClick: async ({ entity }) => {
|
|
965
|
-
var
|
|
966
|
-
return (
|
|
965
|
+
var _a2, _b2, _c2;
|
|
966
|
+
return (_c2 = (_b2 = (_a2 = __privateGet(this, _opts)) == null ? void 0 : _a2.entities) == null ? void 0 : _b2.onClick) == null ? void 0 : _c2.call(_b2, entity);
|
|
967
967
|
},
|
|
968
968
|
onEntityPreview: async ({ entity }) => {
|
|
969
|
-
var
|
|
970
|
-
return ((
|
|
969
|
+
var _a2, _b2, _c2;
|
|
970
|
+
return ((_c2 = (_b2 = (_a2 = __privateGet(this, _opts)) == null ? void 0 : _a2.entities) == null ? void 0 : _b2.onRequestPreview) == null ? void 0 : _c2.call(_b2, entity)) ?? { preview: null };
|
|
971
971
|
},
|
|
972
972
|
onGetClientSecret: async (currentClientSecret) => {
|
|
973
973
|
if (!__privateGet(this, _opts) || !("getClientSecret" in __privateGet(this, _opts).api) || !__privateGet(this, _opts).api.getClientSecret) {
|
|
@@ -981,15 +981,19 @@ class ChatKitElementBase extends (_a2 = HTMLElement, _focusComposer_dec = [requi
|
|
|
981
981
|
op,
|
|
982
982
|
params
|
|
983
983
|
}) => {
|
|
984
|
-
throw new IntegrationError2(
|
|
984
|
+
throw new IntegrationError2(
|
|
985
|
+
"ChatKit: onAddMetadataToRequest is unimplemented."
|
|
986
|
+
);
|
|
985
987
|
}
|
|
986
988
|
}
|
|
987
989
|
}));
|
|
988
990
|
__privateAdd(this, _handleFrameLoad, () => {
|
|
989
|
-
var
|
|
991
|
+
var _a2;
|
|
990
992
|
this.dataset.loaded = "true";
|
|
991
|
-
this.dispatchEvent(
|
|
992
|
-
|
|
993
|
+
this.dispatchEvent(
|
|
994
|
+
new CustomEvent("chatkit.ready", { bubbles: true, composed: true })
|
|
995
|
+
);
|
|
996
|
+
(_a2 = __privateGet(this, _resolveLoaded)) == null ? void 0 : _a2.call(this);
|
|
993
997
|
});
|
|
994
998
|
__privateAdd(this, _initialized, false);
|
|
995
999
|
this.profile = profile;
|
|
@@ -1048,18 +1052,20 @@ class ChatKitElementBase extends (_a2 = HTMLElement, _focusComposer_dec = [requi
|
|
|
1048
1052
|
__privateSet(this, _wrapper, wrapper);
|
|
1049
1053
|
__privateGet(this, _shadow).append(style);
|
|
1050
1054
|
__privateGet(this, _messenger).on("left_header_icon_click", () => {
|
|
1051
|
-
var
|
|
1052
|
-
(
|
|
1055
|
+
var _a2, _b2, _c2;
|
|
1056
|
+
(_c2 = (_b2 = (_a2 = __privateGet(this, _opts)) == null ? void 0 : _a2.header) == null ? void 0 : _b2.leftAction) == null ? void 0 : _c2.onClick();
|
|
1053
1057
|
});
|
|
1054
1058
|
__privateGet(this, _messenger).on("right_header_icon_click", () => {
|
|
1055
|
-
var
|
|
1056
|
-
(
|
|
1059
|
+
var _a2, _b2, _c2;
|
|
1060
|
+
(_c2 = (_b2 = (_a2 = __privateGet(this, _opts)) == null ? void 0 : _a2.header) == null ? void 0 : _b2.rightAction) == null ? void 0 : _c2.onClick();
|
|
1057
1061
|
});
|
|
1058
1062
|
__privateGet(this, _messenger).on("public_event", ([event, data]) => {
|
|
1059
1063
|
if (!this.capabilities.events.has(event)) return;
|
|
1060
1064
|
if (event === "error" && "error" in data) {
|
|
1061
1065
|
const error = fromPossibleFrameSafeError(data.error);
|
|
1062
|
-
this.dispatchEvent(
|
|
1066
|
+
this.dispatchEvent(
|
|
1067
|
+
new CustomEvent("chatkit.error", { detail: { error } })
|
|
1068
|
+
);
|
|
1063
1069
|
if (error instanceof IntegrationError2) {
|
|
1064
1070
|
throw error;
|
|
1065
1071
|
}
|
|
@@ -1089,8 +1095,8 @@ class ChatKitElementBase extends (_a2 = HTMLElement, _focusComposer_dec = [requi
|
|
|
1089
1095
|
}
|
|
1090
1096
|
}
|
|
1091
1097
|
disconnectedCallback() {
|
|
1092
|
-
var
|
|
1093
|
-
(
|
|
1098
|
+
var _a2;
|
|
1099
|
+
(_a2 = __privateGet(this, _frame)) == null ? void 0 : _a2.removeEventListener("load", __privateGet(this, _handleFrameLoad));
|
|
1094
1100
|
__privateGet(this, _messenger).disconnect();
|
|
1095
1101
|
}
|
|
1096
1102
|
applySanitizedOptions(newOptions) {
|
|
@@ -1114,58 +1120,58 @@ class ChatKitElementBase extends (_a2 = HTMLElement, _focusComposer_dec = [requi
|
|
|
1114
1120
|
}
|
|
1115
1121
|
}
|
|
1116
1122
|
async focusComposer() {
|
|
1117
|
-
var
|
|
1123
|
+
var _a2, _b2;
|
|
1118
1124
|
await __privateGet(this, _loaded);
|
|
1119
|
-
(
|
|
1125
|
+
(_a2 = __privateGet(this, _frame)) == null ? void 0 : _a2.focus();
|
|
1120
1126
|
await ((_b2 = __privateGet(this, _messenger)) == null ? void 0 : _b2.commands.focusComposer());
|
|
1121
1127
|
}
|
|
1122
1128
|
async fetchUpdates() {
|
|
1123
|
-
var
|
|
1129
|
+
var _a2;
|
|
1124
1130
|
await __privateGet(this, _loaded);
|
|
1125
|
-
await ((
|
|
1131
|
+
await ((_a2 = __privateGet(this, _messenger)) == null ? void 0 : _a2.commands.fetchUpdates());
|
|
1126
1132
|
}
|
|
1127
1133
|
async sendUserMessage(params) {
|
|
1128
|
-
var
|
|
1134
|
+
var _a2;
|
|
1129
1135
|
await __privateGet(this, _loaded);
|
|
1130
|
-
await ((
|
|
1136
|
+
await ((_a2 = __privateGet(this, _messenger)) == null ? void 0 : _a2.commands.sendUserMessage(params));
|
|
1131
1137
|
}
|
|
1132
1138
|
async setComposerValue(params) {
|
|
1133
|
-
var
|
|
1139
|
+
var _a2;
|
|
1134
1140
|
await __privateGet(this, _loaded);
|
|
1135
|
-
await ((
|
|
1141
|
+
await ((_a2 = __privateGet(this, _messenger)) == null ? void 0 : _a2.commands.setComposerValue(params));
|
|
1136
1142
|
}
|
|
1137
1143
|
async setThreadId(threadId) {
|
|
1138
|
-
var
|
|
1144
|
+
var _a2;
|
|
1139
1145
|
await __privateGet(this, _loaded);
|
|
1140
|
-
await ((
|
|
1146
|
+
await ((_a2 = __privateGet(this, _messenger)) == null ? void 0 : _a2.commands.setThreadId({ threadId }));
|
|
1141
1147
|
}
|
|
1142
1148
|
async shareThread() {
|
|
1143
|
-
var
|
|
1149
|
+
var _a2;
|
|
1144
1150
|
await __privateGet(this, _loaded);
|
|
1145
|
-
return (
|
|
1151
|
+
return (_a2 = __privateGet(this, _messenger)) == null ? void 0 : _a2.commands.shareThread();
|
|
1146
1152
|
}
|
|
1147
1153
|
async sendCustomAction(action, itemId) {
|
|
1148
|
-
var
|
|
1154
|
+
var _a2;
|
|
1149
1155
|
await __privateGet(this, _loaded);
|
|
1150
|
-
return (
|
|
1156
|
+
return (_a2 = __privateGet(this, _messenger)) == null ? void 0 : _a2.commands.sendCustomAction({ action, itemId });
|
|
1151
1157
|
}
|
|
1152
1158
|
async showHistory() {
|
|
1153
|
-
var
|
|
1159
|
+
var _a2;
|
|
1154
1160
|
await __privateGet(this, _loaded);
|
|
1155
|
-
return (
|
|
1161
|
+
return (_a2 = __privateGet(this, _messenger)) == null ? void 0 : _a2.commands.showHistory();
|
|
1156
1162
|
}
|
|
1157
1163
|
async hideHistory() {
|
|
1158
|
-
var
|
|
1164
|
+
var _a2;
|
|
1159
1165
|
await __privateGet(this, _loaded);
|
|
1160
|
-
return (
|
|
1166
|
+
return (_a2 = __privateGet(this, _messenger)) == null ? void 0 : _a2.commands.hideHistory();
|
|
1161
1167
|
}
|
|
1162
1168
|
async setTrainingOptOut(value) {
|
|
1163
|
-
var
|
|
1169
|
+
var _a2;
|
|
1164
1170
|
await __privateGet(this, _loaded);
|
|
1165
|
-
return (
|
|
1171
|
+
return (_a2 = __privateGet(this, _messenger)) == null ? void 0 : _a2.commands.setTrainingOptOut({ value });
|
|
1166
1172
|
}
|
|
1167
1173
|
}
|
|
1168
|
-
_init = __decoratorStart(
|
|
1174
|
+
_init = __decoratorStart(_c);
|
|
1169
1175
|
_opts = new WeakMap();
|
|
1170
1176
|
_frameUrl = new WeakMap();
|
|
1171
1177
|
_frame = new WeakMap();
|
|
@@ -1180,8 +1186,8 @@ emitAndThrow_fn = function(error) {
|
|
|
1180
1186
|
throw error;
|
|
1181
1187
|
};
|
|
1182
1188
|
setOptionsDataAttributes_fn = function(options) {
|
|
1183
|
-
var
|
|
1184
|
-
this.dataset.colorScheme = typeof options.theme === "string" ? options.theme : ((
|
|
1189
|
+
var _a2;
|
|
1190
|
+
this.dataset.colorScheme = typeof options.theme === "string" ? options.theme : ((_a2 = options.theme) == null ? void 0 : _a2.colorScheme) ?? "light";
|
|
1185
1191
|
};
|
|
1186
1192
|
getFrameUrl_fn = function() {
|
|
1187
1193
|
if (!__privateGet(this, _frameUrl)) {
|
|
@@ -1205,7 +1211,9 @@ consumeFrameUrl_fn = function(options) {
|
|
|
1205
1211
|
delete options.frameUrl;
|
|
1206
1212
|
if (frameUrl == null) return;
|
|
1207
1213
|
if (typeof frameUrl !== "string" || frameUrl.trim() === "") {
|
|
1208
|
-
throw new IntegrationError2(
|
|
1214
|
+
throw new IntegrationError2(
|
|
1215
|
+
"ChatKit frameUrl must be a non-empty string."
|
|
1216
|
+
);
|
|
1209
1217
|
}
|
|
1210
1218
|
__privateMethod(this, _ChatKitElementBase_instances, setFrameUrl_fn).call(this, frameUrl);
|
|
1211
1219
|
};
|
|
@@ -1246,8 +1254,8 @@ class ChatKitElement extends ChatKitElementBase {
|
|
|
1246
1254
|
super({ profile: "chatkit" });
|
|
1247
1255
|
}
|
|
1248
1256
|
sanitizeOptions(options) {
|
|
1249
|
-
var
|
|
1250
|
-
(
|
|
1257
|
+
var _a2;
|
|
1258
|
+
(_a2 = options.threadItemActions) == null ? true : delete _a2.share;
|
|
1251
1259
|
return options;
|
|
1252
1260
|
}
|
|
1253
1261
|
}
|