@xpert-ai/chatkit-web-component 0.0.3 → 0.2.0

package/README.md

@@ -1,172 +1,9 @@
 # Xpert Chatkit Web Component
 
-A native Web Component for embedding Xpert Chatkit into any web application.
+This package ships the ChatKit Web Component for embedding ChatKit in any web page.
 
-## Features
+## Role in the ChatKit project
 
-- 🚀 Zero dependencies - pure native Web Component
-- 📦 Lightweight and tree-shakeable
-- 🎨 Style configuration support via JSON schema
-- 🔒 Secure session management
-- ⚡ Loading and error states built-in
-- 🌐 Works with any framework (React, Vue, Angular, vanilla JS)
-
-## Installation
-
-```bash
-npm install @xpert-ai/chatkit-web-component
-```
-
-Or use via CDN:
-
-```html
-<script src="https://unpkg.com/@xpert-ai/chatkit-web-component/dist/xpert-chatkit.js"></script>
-```
-
-## Usage
-
-### Basic Example
-
-```html
-<!DOCTYPE html>
-<html>
-<head>
-  <script src="https://unpkg.com/@xpert-ai/chatkit-web-component/dist/xpert-chatkit.js"></script>
-  <style>
-    xpert-chatkit {
-      width: 100%;
-      height: 600px;
-    }
-  </style>
-</head>
-<body>
-  <xpert-chatkit
-    backend-url="https://your-backend.com"
-    chatkit-url="https://chatkit.xpert.ai"
-    assistant-id="assistant_123">
-  </xpert-chatkit>
-</body>
-</html>
-```
-
-### With Style Configuration
-
-```html
-<xpert-chatkit
-  backend-url="https://your-backend.com"
-  chatkit-url="https://chatkit.xpert.ai"
-  assistant-id="assistant_123"
-  style-config='{"primaryColor": "#007bff", "fontSize": "14px"}'>
-</xpert-chatkit>
-```
-
-### Programmatic Usage
-
-```javascript
-import '@xpert-ai/chatkit-web-component';
-
-// Create element
-const chatkit = document.createElement('xpert-chatkit');
-chatkit.setAttribute('backend-url', 'https://your-backend.com');
-chatkit.setAttribute('chatkit-url', 'https://chatkit.xpert.ai');
-chatkit.setAttribute('assistant-id', 'assistant_123');
-
-// Update style config
-chatkit.updateStyleConfig({
-  primaryColor: '#007bff',
-  fontSize: '14px'
-});
-
-document.body.appendChild(chatkit);
-```
-
-## Attributes
-
-| Attribute | Required | Description |
-|-----------|----------|-------------|
-| `backend-url` | Yes | Backend API URL for session creation |
-| `chatkit-url` | Yes | Chatkit iframe URL |
-| `assistant-id` | No | Assistant ID to use |
-| `style-config` | No | JSON string for style configuration |
-
-## Methods
-
-### `updateStyleConfig(config: Record<string, unknown>)`
-
-Updates the style configuration. Note: Currently only applied on initial load.
-
-```javascript
-const chatkit = document.querySelector('xpert-chatkit');
-chatkit.updateStyleConfig({
-  primaryColor: '#ff0000',
-  borderRadius: '8px'
-});
-```
-
-## Styling
-
-The component automatically fills its container. You can control its size with CSS:
-
-```css
-xpert-chatkit {
-  width: 100%;
-  height: 100vh;
-}
-
-/* Or fixed size */
-xpert-chatkit {
-  width: 400px;
-  height: 600px;
-}
-
-/* In a flex/grid container */
-.container {
-  display: flex;
-  height: 100vh;
-}
-
-xpert-chatkit {
-  flex: 1;
-}
-```
-
-## Error Handling
-
-The component displays loading and error states automatically:
-- Shows "Creating session..." while fetching client secret
-- Shows error message if session creation fails
-- Logs errors to console with `[xpert-chatkit]` prefix
-
-## Browser Support
-
-- Chrome/Edge 54+
-- Firefox 63+
-- Safari 10.1+
-- All modern browsers with Custom Elements v1 support
-
-For older browsers, you may need the [Web Components polyfill](https://github.com/webcomponents/polyfills).
-
-## Development
-
-```bash
-# Install dependencies
-npm install
-
-# Start development server (recommended)
-npm run serve
-
-# Build for production
-npm run build
-
-# Watch mode (build on change)
-npm run dev
-
-# Type check
-npm run type-check
-```
-
-For detailed development instructions, see [DEVELOPMENT.md](./DEVELOPMENT.md).
-
-## License
-
-MIT
+- Exposes a framework-agnostic custom element for integrating ChatKit.
+- Manages the iframe lifecycle and wiring between the host page and the ChatKit UI.
+- Serves as the primary distribution artifact for non-React web integrations.

package/dist/xpert-chatkit.js

@@ -40,17 +40,14 @@ var __decorateElement = (array, flags, name, decorators, target, extra) => {
   }
   return k || __decoratorMetadata(array, target), desc && __defProp(target, name, desc), p ? k ^ 4 ? extra : desc : target;
 };
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
 var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError('Cannot use the "in" operator on this value') : member.has(obj);
 var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 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);
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _setTrainingOptOut_dec, _hideHistory_dec, _showHistory_dec, _sendCustomAction_dec, _shareThread_dec, _setThreadId_dec, _setComposerValue_dec, _sendUserMessage_dec, _fetchUpdates_dec, _focusComposer_dec, _a2, _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;
-var __defProp2 = Object.defineProperty;
-var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => __defNormalProp2(obj, typeof key !== "symbol" ? key + "" : key, value);
-var _a, _b;
+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;
 class EventEmitter {
   constructor() {
     __publicField(this, "callbacks", /* @__PURE__ */ new Map());
@@ -62,16 +59,16 @@ class EventEmitter {
     this.callbacks.get(event).add(callback);
   }
   emit(event, ...args) {
-    var _a22;
+    var _a2;
     const data = args[0];
-    (_a22 = this.callbacks.get(event)) == null ? void 0 : _a22.forEach((callback) => callback(data));
+    (_a2 = this.callbacks.get(event)) == null ? void 0 : _a2.forEach((callback) => callback(data));
   }
   off(event, callback) {
-    var _a22;
+    var _a2;
     if (!callback) {
       this.callbacks.delete(event);
     } else {
-      (_a22 = this.callbacks.get(event)) == null ? void 0 : _a22.delete(callback);
+      (_a2 = this.callbacks.get(event)) == null ? void 0 : _a2.delete(callback);
     }
   }
   allOff() {
@@ -196,8 +193,8 @@ var __rest = function(s, e) {
 const EventStreamContentType = "text/event-stream";
 const DefaultRetryInterval = 1e3;
 const LastEventId = "last-event-id";
-function fetchEventSource(input, _a22) {
-  var { signal: inputSignal, headers: inputHeaders, onopen: inputOnOpen, onmessage, onclose, onerror, openWhenHidden, fetch: inputFetch } = _a22, rest = __rest(_a22, ["signal", "headers", "onopen", "onmessage", "onclose", "onerror", "openWhenHidden", "fetch"]);
+function fetchEventSource(input, _a2) {
+  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"]);
   return new Promise((resolve, reject) => {
     const headers = Object.assign({}, inputHeaders);
     if (!headers.accept) {
@@ -299,7 +296,7 @@ class HttpError extends Error {
   }
 }
 _a = FRAME_SAFE_ERROR_KEY;
-const _FrameSafeHttpError = class _FrameSafeHttpError2 {
+const _FrameSafeHttpError = class _FrameSafeHttpError {
   constructor(message, res, metadata) {
     __publicField(this, _a, "HttpError");
     __publicField(this, "message");
@@ -314,7 +311,7 @@ const _FrameSafeHttpError = class _FrameSafeHttpError2 {
     this.metadata = metadata;
   }
   static fromHttpError(error) {
-    return new _FrameSafeHttpError2(
+    return new _FrameSafeHttpError(
       error.message,
       {
         status: error.status,
@@ -344,9 +341,9 @@ const fetchEventSourceWithRetry = async (url, params) => {
   await fetchEventSource(url, {
     ...restParams,
     onopen: async (res) => {
-      var _a22;
+      var _a2;
       onopen == null ? void 0 : onopen(res);
-      if (res.ok && ((_a22 = res.headers.get("content-type")) == null ? void 0 : _a22.startsWith("text/event-stream"))) {
+      if (res.ok && ((_a2 = res.headers.get("content-type")) == null ? void 0 : _a2.startsWith("text/event-stream"))) {
         retryAttempt = 0;
         return;
       }
@@ -369,6 +366,20 @@ const fetchEventSourceWithRetry = async (url, params) => {
     }
   });
 };
+function safeRandomUUID() {
+  const cryptoRef = globalThis.crypto;
+  if (typeof (cryptoRef == null ? void 0 : cryptoRef.randomUUID) === "function") {
+    return cryptoRef.randomUUID();
+  }
+  if (typeof (cryptoRef == null ? void 0 : cryptoRef.getRandomValues) === "function") {
+    const bytes = new Uint8Array(16);
+    cryptoRef.getRandomValues(bytes);
+    bytes[6] = bytes[6] & 15 | 64;
+    bytes[8] = bytes[8] & 63 | 128;
+    return [...bytes].map((byte) => byte.toString(16).padStart(2, "0")).join("").replace(/^(.{8})(.{4})(.{4})(.{4})(.{12})$/, "$1-$2-$3-$4-$5");
+  }
+  return `ck_${Date.now()}_${Math.random().toString(16).slice(2)}`;
+}
 let IntegrationError$1 = class IntegrationError extends Error {
   constructor(message) {
     super(message);
@@ -417,7 +428,7 @@ class BaseMessenger {
         get: (_, command) => {
           return (data, transfer) => {
             return new Promise((resolve, reject) => {
-              const nonce = crypto.randomUUID();
+              const nonce = safeRandomUUID();
               this.handlers.set(nonce, { resolve, reject, stack: new Error().stack || "" });
               this.sendMessage(
                 {
@@ -434,8 +445,7 @@ class BaseMessenger {
       }
     ));
     __publicField(this, "handleMessage", async (event) => {
-      var _a22, _b2, _c, _d;
-      console.log("Received message", event.data, event.origin, this.targetOrigin, event.source, this.target());
+      var _a2, _b2, _c2, _d;
       if (!event.data || event.data.__xpaiChatKit !== true || event.origin !== this.targetOrigin || event.source !== this.target()) {
         return;
       }
@@ -508,7 +518,6 @@ class BaseMessenger {
           break;
         }
         case "command": {
-          console.log("Received command", data.command, data.data);
           if (!this.canReceiveCommand(data.command)) {
             this.sendMessage({
               type: "response",
@@ -518,7 +527,7 @@ class BaseMessenger {
             return;
           }
           try {
-            const response = await ((_b2 = (_a22 = this.commandHandlers)[data.command]) == null ? void 0 : _b2.call(_a22, data.data));
+            const response = await ((_b2 = (_a2 = this.commandHandlers)[data.command]) == null ? void 0 : _b2.call(_a2, data.data));
             this.sendMessage({
               type: "response",
               response,
@@ -562,7 +571,7 @@ class BaseMessenger {
             console.error("No handler found for nonce", data.nonce);
             return;
           }
-          (_d = (_c = this.fetchEventSourceHandlers.get(data.nonce)) == null ? void 0 : _c.onmessage) == null ? void 0 : _d.call(_c, data.message);
+          (_d = (_c2 = this.fetchEventSourceHandlers.get(data.nonce)) == null ? void 0 : _c2.onmessage) == null ? void 0 : _d.call(_c2, data.message);
           break;
         }
         case "abortSignal": {
@@ -584,12 +593,12 @@ class BaseMessenger {
     this.targetOrigin = targetOrigin;
   }
   sendMessage(data, transfer) {
-    var _a22;
+    var _a2;
     const message = {
       __xpaiChatKit: true,
       ...data
     };
-    (_a22 = this.target()) == null ? void 0 : _a22.postMessage(message, this.targetOrigin, transfer);
+    (_a2 = this.target()) == null ? void 0 : _a2.postMessage(message, this.targetOrigin, transfer);
   }
   connect() {
     window.addEventListener("message", this.handleMessage);
@@ -599,7 +608,7 @@ class BaseMessenger {
   }
   fetch(url, params) {
     return new Promise((resolve, reject) => {
-      const nonce = crypto.randomUUID();
+      const nonce = safeRandomUUID();
       this.handlers.set(nonce, { resolve, reject, stack: new Error().stack || "" });
       let formData;
       if (params.body instanceof FormData) {
@@ -611,11 +620,11 @@ class BaseMessenger {
       }
       if (params.signal) {
         params.signal.addEventListener("abort", () => {
-          var _a22;
+          var _a2;
           this.sendMessage({
             type: "abortSignal",
             nonce,
-            reason: (_a22 = params.signal) == null ? void 0 : _a22.reason
+            reason: (_a2 = params.signal) == null ? void 0 : _a2.reason
           });
         });
         params.signal = void 0;
@@ -628,7 +637,7 @@ class BaseMessenger {
   fetchEventSource(url, params) {
     return new Promise((resolve, reject) => {
       const { onmessage, signal, ...rest } = params;
-      const nonce = crypto.randomUUID();
+      const nonce = safeRandomUUID();
       this.handlers.set(nonce, { resolve, reject, stack: new Error().stack || "" });
       this.fetchEventSourceHandlers.set(nonce, {
         onmessage
@@ -888,7 +897,7 @@ function requireCommandCapability(value, context) {
     return value.apply(this, args);
   };
 }
-class ChatKitElementBase extends (_a2 = 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], _a2) {
+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) {
   constructor({ profile }) {
     super();
     __runInitializers(_init, 5, this);
@@ -904,17 +913,19 @@ class ChatKitElementBase extends (_a2 = HTMLElement, _focusComposer_dec = [requi
     }));
     __privateAdd(this, _messenger, new ChatFrameMessenger({
       fetch: (...args) => {
-        var _a3;
-        const customFetch = ((_a3 = __privateGet(this, _opts)) == null ? void 0 : _a3.api) && "fetch" in __privateGet(this, _opts).api && __privateGet(this, _opts).api.fetch;
+        var _a2;
+        const customFetch = ((_a2 = __privateGet(this, _opts)) == null ? void 0 : _a2.api) && "fetch" in __privateGet(this, _opts).api && __privateGet(this, _opts).api.fetch;
         return customFetch ? customFetch(...args) : fetch(...args);
       },
       target: () => {
-        var _a3;
-        return ((_a3 = __privateGet(this, _frame)) == null ? void 0 : _a3.contentWindow) ?? null;
+        var _a2;
+        return ((_a2 = __privateGet(this, _frame)) == null ? void 0 : _a2.contentWindow) ?? null;
       },
       targetOrigin: window.location.origin,
       handlers: {
-        onFileInputClick: ({ inputAttributes }) => {
+        onFileInputClick: ({
+          inputAttributes
+        }) => {
           return new Promise((resolve) => {
             const input = document.createElement("input");
             for (const [key, value] of Object.entries(inputAttributes)) {
@@ -938,8 +949,8 @@ class ChatKitElementBase extends (_a2 = HTMLElement, _focusComposer_dec = [requi
           id,
           tool_call_id
         }) => {
-          var _a3;
-          const onClientTool = (_a3 = __privateGet(this, _opts)) == null ? void 0 : _a3.onClientTool;
+          var _a2;
+          const onClientTool = (_a2 = __privateGet(this, _opts)) == null ? void 0 : _a2.onClientTool;
           if (!onClientTool) {
             __privateMethod(this, _ChatKitElementBase_instances, emitAndThrow_fn).call(this, new IntegrationError2(
               `No handler for client tool calls. You'll need to add onClientTool to your ChatKit options.`
@@ -947,9 +958,12 @@ class ChatKitElementBase extends (_a2 = HTMLElement, _focusComposer_dec = [requi
           }
           return onClientTool({ name, params, id, tool_call_id });
         },
-        onWidgetAction: async ({ action, widgetItem }) => {
-          var _a3, _b2;
-          const onAction = (_b2 = (_a3 = __privateGet(this, _opts)) == null ? void 0 : _a3.widgets) == null ? void 0 : _b2.onAction;
+        onWidgetAction: async ({
+          action,
+          widgetItem
+        }) => {
+          var _a2, _b2;
+          const onAction = (_b2 = (_a2 = __privateGet(this, _opts)) == null ? void 0 : _a2.widgets) == null ? void 0 : _b2.onAction;
           if (!onAction) {
             __privateMethod(this, _ChatKitElementBase_instances, emitAndThrow_fn).call(this, new IntegrationError2(
               `No handler for widget actions. You'll need to add widgets.onAction to your ChatKit options.`
@@ -958,16 +972,16 @@ class ChatKitElementBase extends (_a2 = HTMLElement, _focusComposer_dec = [requi
           return onAction(action, widgetItem);
         },
         onEntitySearch: async ({ query }) => {
-          var _a3, _b2, _c;
-          return ((_c = (_b2 = (_a3 = __privateGet(this, _opts)) == null ? void 0 : _a3.entities) == null ? void 0 : _b2.onTagSearch) == null ? void 0 : _c.call(_b2, query)) ?? [];
+          var _a2, _b2, _c2;
+          return ((_c2 = (_b2 = (_a2 = __privateGet(this, _opts)) == null ? void 0 : _a2.entities) == null ? void 0 : _b2.onTagSearch) == null ? void 0 : _c2.call(_b2, query)) ?? [];
         },
         onEntityClick: async ({ entity }) => {
-          var _a3, _b2, _c;
-          return (_c = (_b2 = (_a3 = __privateGet(this, _opts)) == null ? void 0 : _a3.entities) == null ? void 0 : _b2.onClick) == null ? void 0 : _c.call(_b2, entity);
+          var _a2, _b2, _c2;
+          return (_c2 = (_b2 = (_a2 = __privateGet(this, _opts)) == null ? void 0 : _a2.entities) == null ? void 0 : _b2.onClick) == null ? void 0 : _c2.call(_b2, entity);
         },
         onEntityPreview: async ({ entity }) => {
-          var _a3, _b2, _c;
-          return ((_c = (_b2 = (_a3 = __privateGet(this, _opts)) == null ? void 0 : _a3.entities) == null ? void 0 : _b2.onRequestPreview) == null ? void 0 : _c.call(_b2, entity)) ?? { preview: null };
+          var _a2, _b2, _c2;
+          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 };
         },
         onGetClientSecret: async (currentClientSecret) => {
           if (!__privateGet(this, _opts) || !("getClientSecret" in __privateGet(this, _opts).api) || !__privateGet(this, _opts).api.getClientSecret) {
@@ -981,15 +995,19 @@ class ChatKitElementBase extends (_a2 = HTMLElement, _focusComposer_dec = [requi
           op,
           params
         }) => {
-          throw new IntegrationError2("ChatKit: onAddMetadataToRequest is unimplemented.");
+          throw new IntegrationError2(
+            "ChatKit: onAddMetadataToRequest is unimplemented."
+          );
         }
       }
     }));
     __privateAdd(this, _handleFrameLoad, () => {
-      var _a3;
+      var _a2;
       this.dataset.loaded = "true";
-      this.dispatchEvent(new CustomEvent("chatkit.ready", { bubbles: true, composed: true }));
-      (_a3 = __privateGet(this, _resolveLoaded)) == null ? void 0 : _a3.call(this);
+      this.dispatchEvent(
+        new CustomEvent("chatkit.ready", { bubbles: true, composed: true })
+      );
+      (_a2 = __privateGet(this, _resolveLoaded)) == null ? void 0 : _a2.call(this);
     });
     __privateAdd(this, _initialized, false);
     this.profile = profile;
@@ -1048,18 +1066,20 @@ class ChatKitElementBase extends (_a2 = HTMLElement, _focusComposer_dec = [requi
     __privateSet(this, _wrapper, wrapper);
     __privateGet(this, _shadow).append(style);
     __privateGet(this, _messenger).on("left_header_icon_click", () => {
-      var _a3, _b2, _c;
-      (_c = (_b2 = (_a3 = __privateGet(this, _opts)) == null ? void 0 : _a3.header) == null ? void 0 : _b2.leftAction) == null ? void 0 : _c.onClick();
+      var _a2, _b2, _c2;
+      (_c2 = (_b2 = (_a2 = __privateGet(this, _opts)) == null ? void 0 : _a2.header) == null ? void 0 : _b2.leftAction) == null ? void 0 : _c2.onClick();
     });
     __privateGet(this, _messenger).on("right_header_icon_click", () => {
-      var _a3, _b2, _c;
-      (_c = (_b2 = (_a3 = __privateGet(this, _opts)) == null ? void 0 : _a3.header) == null ? void 0 : _b2.rightAction) == null ? void 0 : _c.onClick();
+      var _a2, _b2, _c2;
+      (_c2 = (_b2 = (_a2 = __privateGet(this, _opts)) == null ? void 0 : _a2.header) == null ? void 0 : _b2.rightAction) == null ? void 0 : _c2.onClick();
     });
     __privateGet(this, _messenger).on("public_event", ([event, data]) => {
       if (!this.capabilities.events.has(event)) return;
       if (event === "error" && "error" in data) {
         const error = fromPossibleFrameSafeError(data.error);
-        this.dispatchEvent(new CustomEvent("chatkit.error", { detail: { error } }));
+        this.dispatchEvent(
+          new CustomEvent("chatkit.error", { detail: { error } })
+        );
         if (error instanceof IntegrationError2) {
           throw error;
         }
@@ -1089,8 +1109,8 @@ class ChatKitElementBase extends (_a2 = HTMLElement, _focusComposer_dec = [requi
     }
   }
   disconnectedCallback() {
-    var _a3;
-    (_a3 = __privateGet(this, _frame)) == null ? void 0 : _a3.removeEventListener("load", __privateGet(this, _handleFrameLoad));
+    var _a2;
+    (_a2 = __privateGet(this, _frame)) == null ? void 0 : _a2.removeEventListener("load", __privateGet(this, _handleFrameLoad));
     __privateGet(this, _messenger).disconnect();
   }
   applySanitizedOptions(newOptions) {
@@ -1114,58 +1134,58 @@ class ChatKitElementBase extends (_a2 = HTMLElement, _focusComposer_dec = [requi
     }
   }
   async focusComposer() {
-    var _a3, _b2;
+    var _a2, _b2;
     await __privateGet(this, _loaded);
-    (_a3 = __privateGet(this, _frame)) == null ? void 0 : _a3.focus();
+    (_a2 = __privateGet(this, _frame)) == null ? void 0 : _a2.focus();
     await ((_b2 = __privateGet(this, _messenger)) == null ? void 0 : _b2.commands.focusComposer());
   }
   async fetchUpdates() {
-    var _a3;
+    var _a2;
     await __privateGet(this, _loaded);
-    await ((_a3 = __privateGet(this, _messenger)) == null ? void 0 : _a3.commands.fetchUpdates());
+    await ((_a2 = __privateGet(this, _messenger)) == null ? void 0 : _a2.commands.fetchUpdates());
   }
   async sendUserMessage(params) {
-    var _a3;
+    var _a2;
     await __privateGet(this, _loaded);
-    await ((_a3 = __privateGet(this, _messenger)) == null ? void 0 : _a3.commands.sendUserMessage(params));
+    await ((_a2 = __privateGet(this, _messenger)) == null ? void 0 : _a2.commands.sendUserMessage(params));
   }
   async setComposerValue(params) {
-    var _a3;
+    var _a2;
     await __privateGet(this, _loaded);
-    await ((_a3 = __privateGet(this, _messenger)) == null ? void 0 : _a3.commands.setComposerValue(params));
+    await ((_a2 = __privateGet(this, _messenger)) == null ? void 0 : _a2.commands.setComposerValue(params));
   }
   async setThreadId(threadId) {
-    var _a3;
+    var _a2;
     await __privateGet(this, _loaded);
-    await ((_a3 = __privateGet(this, _messenger)) == null ? void 0 : _a3.commands.setThreadId({ threadId }));
+    await ((_a2 = __privateGet(this, _messenger)) == null ? void 0 : _a2.commands.setThreadId({ threadId }));
   }
   async shareThread() {
-    var _a3;
+    var _a2;
     await __privateGet(this, _loaded);
-    return (_a3 = __privateGet(this, _messenger)) == null ? void 0 : _a3.commands.shareThread();
+    return (_a2 = __privateGet(this, _messenger)) == null ? void 0 : _a2.commands.shareThread();
   }
   async sendCustomAction(action, itemId) {
-    var _a3;
+    var _a2;
     await __privateGet(this, _loaded);
-    return (_a3 = __privateGet(this, _messenger)) == null ? void 0 : _a3.commands.sendCustomAction({ action, itemId });
+    return (_a2 = __privateGet(this, _messenger)) == null ? void 0 : _a2.commands.sendCustomAction({ action, itemId });
   }
   async showHistory() {
-    var _a3;
+    var _a2;
     await __privateGet(this, _loaded);
-    return (_a3 = __privateGet(this, _messenger)) == null ? void 0 : _a3.commands.showHistory();
+    return (_a2 = __privateGet(this, _messenger)) == null ? void 0 : _a2.commands.showHistory();
   }
   async hideHistory() {
-    var _a3;
+    var _a2;
     await __privateGet(this, _loaded);
-    return (_a3 = __privateGet(this, _messenger)) == null ? void 0 : _a3.commands.hideHistory();
+    return (_a2 = __privateGet(this, _messenger)) == null ? void 0 : _a2.commands.hideHistory();
   }
   async setTrainingOptOut(value) {
-    var _a3;
+    var _a2;
     await __privateGet(this, _loaded);
-    return (_a3 = __privateGet(this, _messenger)) == null ? void 0 : _a3.commands.setTrainingOptOut({ value });
+    return (_a2 = __privateGet(this, _messenger)) == null ? void 0 : _a2.commands.setTrainingOptOut({ value });
   }
 }
-_init = __decoratorStart(_a2);
+_init = __decoratorStart(_c);
 _opts = new WeakMap();
 _frameUrl = new WeakMap();
 _frame = new WeakMap();
@@ -1180,8 +1200,8 @@ emitAndThrow_fn = function(error) {
   throw error;
 };
 setOptionsDataAttributes_fn = function(options) {
-  var _a3;
-  this.dataset.colorScheme = typeof options.theme === "string" ? options.theme : ((_a3 = options.theme) == null ? void 0 : _a3.colorScheme) ?? "light";
+  var _a2;
+  this.dataset.colorScheme = typeof options.theme === "string" ? options.theme : ((_a2 = options.theme) == null ? void 0 : _a2.colorScheme) ?? "light";
 };
 getFrameUrl_fn = function() {
   if (!__privateGet(this, _frameUrl)) {
@@ -1205,7 +1225,9 @@ consumeFrameUrl_fn = function(options) {
   delete options.frameUrl;
   if (frameUrl == null) return;
   if (typeof frameUrl !== "string" || frameUrl.trim() === "") {
-    throw new IntegrationError2("ChatKit frameUrl must be a non-empty string.");
+    throw new IntegrationError2(
+      "ChatKit frameUrl must be a non-empty string."
+    );
   }
   __privateMethod(this, _ChatKitElementBase_instances, setFrameUrl_fn).call(this, frameUrl);
 };
@@ -1246,8 +1268,8 @@ class ChatKitElement extends ChatKitElementBase {
     super({ profile: "chatkit" });
   }
   sanitizeOptions(options) {
-    var _a3;
-    (_a3 = options.threadItemActions) == null ? true : delete _a3.share;
+    var _a2;
+    (_a2 = options.threadItemActions) == null ? true : delete _a2.share;
     return options;
   }
 }