@convai/web-sdk 1.8.0-beta.6 → 1.8.0-beta.7

package/dist/embed/ConvaiChatElement.js

@@ -0,0 +1,300 @@
+import { ConvaiClient } from "../core/ConvaiClient.js";
+import { loadPublishedChatSession, parsePublishedChatUrl, } from "./publicationApi.js";
+const VISIBLE_MESSAGE_TYPES = new Set([
+    "user-llm-text",
+    "user-transcription",
+    "bot-llm-text",
+    "bot-output",
+]);
+const styles = `
+  :host {
+    color-scheme: dark;
+    display: block;
+    min-height: 560px;
+    width: 100%;
+    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  }
+  * { box-sizing: border-box; }
+  .shell {
+    background: #111118;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 16px;
+    color: #fff;
+    display: grid;
+    grid-template-rows: auto minmax(0, 1fr) auto;
+    height: 100%;
+    min-height: inherit;
+    overflow: hidden;
+  }
+  header { align-items: center; border-bottom: 1px solid rgba(255,255,255,.1); display: flex; gap: 12px; padding: 16px 20px; }
+  .avatar { background: #654dcc; border-radius: 50%; height: 44px; object-fit: cover; width: 44px; }
+  .identity { min-width: 0; }
+  h2 { font-size: 17px; line-height: 1.3; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .status { color: rgba(255,255,255,.62); font-size: 13px; margin: 3px 0 0; }
+  .messages { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; padding: 20px; }
+  .empty { align-items: center; color: rgba(255,255,255,.7); display: flex; flex: 1; justify-content: center; min-height: 240px; text-align: center; }
+  .message { border-radius: 14px; line-height: 1.45; max-width: 82%; overflow-wrap: anywhere; padding: 10px 14px; white-space: pre-wrap; }
+  .message.user { align-self: flex-end; background: #654dcc; }
+  .message.character { align-self: flex-start; background: rgba(255,255,255,.09); }
+  .error { color: #ff9e9e; font-size: 13px; margin: 0; padding: 0 20px 12px; }
+  form { border-top: 1px solid rgba(255,255,255,.1); display: flex; gap: 10px; padding: 16px; }
+  input { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13); border-radius: 12px; color: #fff; flex: 1; font: inherit; min-width: 0; outline: none; padding: 11px 13px; }
+  input:focus { border-color: #8d7ae4; }
+  button { background: #654dcc; border: 0; border-radius: 12px; color: #fff; cursor: pointer; font: inherit; font-weight: 600; padding: 10px 16px; }
+  button:disabled { cursor: default; opacity: .45; }
+  .retry { align-self: center; margin-top: 12px; }
+  @media (max-width: 560px) {
+    :host { min-height: 100dvh; }
+    .shell { border: 0; border-radius: 0; }
+    .messages { padding: 16px; }
+  }
+`;
+function errorText(error) {
+    return error instanceof Error && error.message
+        ? error.message
+        : "Published chat is temporarily unavailable";
+}
+export class ConvaiChatElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.client = null;
+        this.controller = null;
+        this.unsubs = [];
+        this.mounted = false;
+        this.ready = false;
+        this.messages = [];
+        this.descriptor = null;
+        this.failureReported = false;
+    }
+    connectedCallback() {
+        if (this.mounted)
+            return;
+        this.mounted = true;
+        this.renderShell();
+        void this.start();
+    }
+    disconnectedCallback() {
+        this.mounted = false;
+        this.controller?.abort();
+        this.controller = null;
+        void this.cleanupClient();
+    }
+    requireAttribute(name) {
+        const value = this.getAttribute(name)?.trim();
+        if (!value)
+            throw new Error(`${name} is required`);
+        return value;
+    }
+    renderShell() {
+        const root = this.shadowRoot ?? this.attachShadow({ mode: "open" });
+        root.innerHTML = `
+      <style>${styles}</style>
+      <section class="shell" aria-label="Convai character chat">
+        <header>
+          <img class="avatar" alt="" hidden />
+          <div class="identity">
+            <h2>Character chat</h2>
+            <p class="status" role="status">Preparing chat…</p>
+          </div>
+        </header>
+        <div class="messages" aria-live="polite"><div class="empty">Preparing a private session…</div></div>
+        <p class="error" role="alert" hidden></p>
+        <form>
+          <input aria-label="Chat message" maxlength="4000" placeholder="Preparing chat…" disabled />
+          <button class="interrupt" type="button" hidden>Stop</button>
+          <button class="send" type="submit" disabled>Send</button>
+        </form>
+      </section>
+    `;
+        const input = root.querySelector("input");
+        const sendButton = root.querySelector(".send");
+        if (input) {
+            input.addEventListener("input", () => {
+                if (sendButton) {
+                    sendButton.disabled = !this.client?.state.isConnected || !input.value.trim();
+                }
+            });
+        }
+        root.querySelector("form")?.addEventListener("submit", (event) => {
+            event.preventDefault();
+            if (!input)
+                return;
+            const text = input.value.trim();
+            if (!text || !this.client?.state.isConnected)
+                return;
+            this.client.sendUserTextMessage(text);
+            input.value = "";
+            this.updateControls(true);
+        });
+        root.querySelector(".interrupt")?.addEventListener("click", () => {
+            this.client?.sendInterruptMessage();
+            this.setResponseActive(false);
+        });
+    }
+    async start() {
+        this.controller?.abort();
+        const controller = new AbortController();
+        this.controller = controller;
+        await this.cleanupClient();
+        if (controller.signal.aborted || this.controller !== controller || !this.mounted)
+            return;
+        this.ready = false;
+        this.failureReported = false;
+        this.messages = [];
+        this.renderMessages();
+        this.setError("");
+        this.setStatus("Preparing chat…");
+        this.updateControls(false);
+        try {
+            const publicationId = this.requireAttribute("publication-id");
+            const publicationApiUrl = this.getAttribute("publication-api-url")?.trim();
+            const coreUrlValue = this.getAttribute("core-url")?.trim();
+            const coreUrl = coreUrlValue
+                ? parsePublishedChatUrl(coreUrlValue, "core-url").toString().replace(/\/$/, "")
+                : undefined;
+            const { descriptor, launchToken } = await loadPublishedChatSession(publicationId, publicationApiUrl || undefined, fetch, controller.signal);
+            if (controller.signal.aborted || this.controller !== controller || !this.mounted)
+                return;
+            this.descriptor = descriptor;
+            this.renderDescriptor();
+            const client = new ConvaiClient();
+            this.client = client;
+            this.unsubs = [
+                client.on("messagesChange", (messages) => {
+                    this.messages = [...messages];
+                    this.renderMessages();
+                }),
+                client.on("stateChange", (state) => {
+                    this.setResponseActive(state.isThinking || state.isSpeaking);
+                }),
+                client.on("botReady", () => {
+                    this.ready = true;
+                    this.setStatus("Ready to chat");
+                    this.updateControls(true);
+                    this.dispatch("convai-ready");
+                }),
+                client.on("disconnect", () => {
+                    this.setStatus("Session ended");
+                    this.updateControls(false);
+                    this.showRetry();
+                    this.dispatch("convai-disconnect");
+                }),
+                client.on("error", (error) => {
+                    if (!controller.signal.aborted && this.controller === controller) {
+                        void this.fail(error);
+                    }
+                }),
+            ];
+            this.setStatus("Connecting…");
+            await client.connectWithPublicationGrant(launchToken, { ...(coreUrl ? { url: coreUrl } : {}), signal: controller.signal });
+            if (!this.ready)
+                this.setStatus("Connected; waiting for character…");
+        }
+        catch (error) {
+            if (controller.signal.aborted || this.controller !== controller || !this.mounted)
+                return;
+            await this.fail(error);
+        }
+    }
+    async fail(error) {
+        if (this.failureReported)
+            return;
+        this.failureReported = true;
+        const message = errorText(error);
+        this.setStatus("Unable to connect");
+        this.setError(message);
+        this.updateControls(false);
+        this.showRetry();
+        this.dispatch("convai-error", { message });
+        await this.cleanupClient();
+    }
+    async cleanupClient() {
+        this.unsubs.splice(0).forEach((unsubscribe) => unsubscribe());
+        const client = this.client;
+        this.client = null;
+        if (client)
+            await client.disconnect().catch(() => undefined);
+    }
+    renderDescriptor() {
+        const root = this.shadowRoot;
+        if (!root || !this.descriptor)
+            return;
+        const title = root.querySelector("h2");
+        if (title)
+            title.textContent = this.descriptor.display_name;
+        const avatar = root.querySelector(".avatar");
+        if (avatar && this.descriptor.image_url) {
+            avatar.src = this.descriptor.image_url;
+            avatar.alt = this.descriptor.display_name;
+            avatar.hidden = false;
+        }
+    }
+    renderMessages() {
+        const container = this.shadowRoot?.querySelector(".messages");
+        if (!container)
+            return;
+        container.replaceChildren();
+        const visible = this.messages.filter((message) => VISIBLE_MESSAGE_TYPES.has(message.type) && Boolean(message.content?.trim()));
+        if (visible.length === 0) {
+            const empty = document.createElement("div");
+            empty.className = "empty";
+            empty.textContent = this.descriptor?.description || "Start a new private conversation.";
+            container.appendChild(empty);
+            return;
+        }
+        visible.forEach((message) => {
+            const item = document.createElement("div");
+            item.className = `message ${message.type.startsWith("user") ? "user" : "character"}`;
+            item.textContent = message.content;
+            container.appendChild(item);
+        });
+        container.scrollTop = container.scrollHeight;
+    }
+    setStatus(message) {
+        const status = this.shadowRoot?.querySelector(".status");
+        if (status)
+            status.textContent = message;
+    }
+    setError(message) {
+        const error = this.shadowRoot?.querySelector(".error");
+        if (!error)
+            return;
+        error.textContent = message;
+        error.hidden = !message;
+    }
+    updateControls(enabled) {
+        const input = this.shadowRoot?.querySelector("input");
+        const button = this.shadowRoot?.querySelector(".send");
+        if (input) {
+            input.disabled = !enabled;
+            input.placeholder = enabled ? "Type a message…" : "Preparing chat…";
+        }
+        if (button)
+            button.disabled = !enabled || !input?.value.trim();
+    }
+    setResponseActive(active) {
+        const interrupt = this.shadowRoot?.querySelector(".interrupt");
+        if (interrupt)
+            interrupt.hidden = !active;
+    }
+    showRetry() {
+        const messages = this.shadowRoot?.querySelector(".messages");
+        if (!messages || messages.querySelector(".retry"))
+            return;
+        const retry = document.createElement("button");
+        retry.className = "retry";
+        retry.type = "button";
+        retry.textContent = "Try again";
+        retry.addEventListener("click", () => void this.start(), { once: true });
+        messages.appendChild(retry);
+    }
+    dispatch(name, detail) {
+        this.dispatchEvent(new CustomEvent(name, { bubbles: true, composed: true, detail }));
+    }
+}
+export function defineConvaiChatElement(registry = customElements) {
+    if (!registry.get("convai-chat")) {
+        registry.define("convai-chat", ConvaiChatElement);
+    }
+}
+//# sourceMappingURL=ConvaiChatElement.js.map

package/dist/embed/ConvaiChatElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConvaiChatElement.js","sourceRoot":"","sources":["../../src/embed/ConvaiChatElement.ts"],"names":[],"mappings":"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","sourcesContent":["import { ConvaiClient } from \"../core/ConvaiClient\";\nimport type { ChatMessage, ConvaiClientState } from \"../core/types\";\nimport {\n  loadPublishedChatSession,\n  parsePublishedChatUrl,\n  type PublishedChatDescriptor,\n} from \"./publicationApi\";\n\nconst VISIBLE_MESSAGE_TYPES = new Set([\n  \"user-llm-text\",\n  \"user-transcription\",\n  \"bot-llm-text\",\n  \"bot-output\",\n]);\n\nconst styles = `\n  :host {\n    color-scheme: dark;\n    display: block;\n    min-height: 560px;\n    width: 100%;\n    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  }\n  * { box-sizing: border-box; }\n  .shell {\n    background: #111118;\n    border: 1px solid rgba(255, 255, 255, 0.1);\n    border-radius: 16px;\n    color: #fff;\n    display: grid;\n    grid-template-rows: auto minmax(0, 1fr) auto;\n    height: 100%;\n    min-height: inherit;\n    overflow: hidden;\n  }\n  header { align-items: center; border-bottom: 1px solid rgba(255,255,255,.1); display: flex; gap: 12px; padding: 16px 20px; }\n  .avatar { background: #654dcc; border-radius: 50%; height: 44px; object-fit: cover; width: 44px; }\n  .identity { min-width: 0; }\n  h2 { font-size: 17px; line-height: 1.3; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n  .status { color: rgba(255,255,255,.62); font-size: 13px; margin: 3px 0 0; }\n  .messages { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; padding: 20px; }\n  .empty { align-items: center; color: rgba(255,255,255,.7); display: flex; flex: 1; justify-content: center; min-height: 240px; text-align: center; }\n  .message { border-radius: 14px; line-height: 1.45; max-width: 82%; overflow-wrap: anywhere; padding: 10px 14px; white-space: pre-wrap; }\n  .message.user { align-self: flex-end; background: #654dcc; }\n  .message.character { align-self: flex-start; background: rgba(255,255,255,.09); }\n  .error { color: #ff9e9e; font-size: 13px; margin: 0; padding: 0 20px 12px; }\n  form { border-top: 1px solid rgba(255,255,255,.1); display: flex; gap: 10px; padding: 16px; }\n  input { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13); border-radius: 12px; color: #fff; flex: 1; font: inherit; min-width: 0; outline: none; padding: 11px 13px; }\n  input:focus { border-color: #8d7ae4; }\n  button { background: #654dcc; border: 0; border-radius: 12px; color: #fff; cursor: pointer; font: inherit; font-weight: 600; padding: 10px 16px; }\n  button:disabled { cursor: default; opacity: .45; }\n  .retry { align-self: center; margin-top: 12px; }\n  @media (max-width: 560px) {\n    :host { min-height: 100dvh; }\n    .shell { border: 0; border-radius: 0; }\n    .messages { padding: 16px; }\n  }\n`;\n\nfunction errorText(error: unknown): string {\n  return error instanceof Error && error.message\n    ? error.message\n    : \"Published chat is temporarily unavailable\";\n}\n\nexport class ConvaiChatElement extends HTMLElement {\n  private client: ConvaiClient | null = null;\n  private controller: AbortController | null = null;\n  private unsubs: Array<() => void> = [];\n  private mounted = false;\n  private ready = false;\n  private messages: ChatMessage[] = [];\n  private descriptor: PublishedChatDescriptor | null = null;\n  private failureReported = false;\n\n  connectedCallback(): void {\n    if (this.mounted) return;\n    this.mounted = true;\n    this.renderShell();\n    void this.start();\n  }\n\n  disconnectedCallback(): void {\n    this.mounted = false;\n    this.controller?.abort();\n    this.controller = null;\n    void this.cleanupClient();\n  }\n\n  private requireAttribute(name: string): string {\n    const value = this.getAttribute(name)?.trim();\n    if (!value) throw new Error(`${name} is required`);\n    return value;\n  }\n\n  private renderShell(): void {\n    const root = this.shadowRoot ?? this.attachShadow({ mode: \"open\" });\n    root.innerHTML = `\n      <style>${styles}</style>\n      <section class=\"shell\" aria-label=\"Convai character chat\">\n        <header>\n          <img class=\"avatar\" alt=\"\" hidden />\n          <div class=\"identity\">\n            <h2>Character chat</h2>\n            <p class=\"status\" role=\"status\">Preparing chat…</p>\n          </div>\n        </header>\n        <div class=\"messages\" aria-live=\"polite\"><div class=\"empty\">Preparing a private session…</div></div>\n        <p class=\"error\" role=\"alert\" hidden></p>\n        <form>\n          <input aria-label=\"Chat message\" maxlength=\"4000\" placeholder=\"Preparing chat…\" disabled />\n          <button class=\"interrupt\" type=\"button\" hidden>Stop</button>\n          <button class=\"send\" type=\"submit\" disabled>Send</button>\n        </form>\n      </section>\n    `;\n    const input = root.querySelector<HTMLInputElement>(\"input\");\n    const sendButton = root.querySelector<HTMLButtonElement>(\".send\");\n    if (input) {\n      input.addEventListener(\"input\", () => {\n        if (sendButton) {\n          sendButton.disabled = !this.client?.state.isConnected || !input.value.trim();\n        }\n      });\n    }\n    root.querySelector(\"form\")?.addEventListener(\"submit\", (event) => {\n      event.preventDefault();\n      if (!input) return;\n      const text = input.value.trim();\n      if (!text || !this.client?.state.isConnected) return;\n      this.client.sendUserTextMessage(text);\n      input.value = \"\";\n      this.updateControls(true);\n    });\n    root.querySelector(\".interrupt\")?.addEventListener(\"click\", () => {\n      this.client?.sendInterruptMessage();\n      this.setResponseActive(false);\n    });\n  }\n\n  private async start(): Promise<void> {\n    this.controller?.abort();\n    const controller = new AbortController();\n    this.controller = controller;\n    await this.cleanupClient();\n    if (controller.signal.aborted || this.controller !== controller || !this.mounted) return;\n    this.ready = false;\n    this.failureReported = false;\n    this.messages = [];\n    this.renderMessages();\n    this.setError(\"\");\n    this.setStatus(\"Preparing chat…\");\n    this.updateControls(false);\n\n    try {\n      const publicationId = this.requireAttribute(\"publication-id\");\n      const publicationApiUrl = this.getAttribute(\"publication-api-url\")?.trim();\n      const coreUrlValue = this.getAttribute(\"core-url\")?.trim();\n      const coreUrl = coreUrlValue\n        ? parsePublishedChatUrl(coreUrlValue, \"core-url\").toString().replace(/\\/$/, \"\")\n        : undefined;\n\n      const { descriptor, launchToken } = await loadPublishedChatSession(\n        publicationId,\n        publicationApiUrl || undefined,\n        fetch,\n        controller.signal,\n      );\n      if (controller.signal.aborted || this.controller !== controller || !this.mounted) return;\n      this.descriptor = descriptor;\n      this.renderDescriptor();\n\n      const client = new ConvaiClient();\n      this.client = client;\n      this.unsubs = [\n        client.on(\"messagesChange\", (messages: ChatMessage[]) => {\n          this.messages = [...messages];\n          this.renderMessages();\n        }),\n        client.on(\"stateChange\", (state: ConvaiClientState) => {\n          this.setResponseActive(state.isThinking || state.isSpeaking);\n        }),\n        client.on(\"botReady\", () => {\n          this.ready = true;\n          this.setStatus(\"Ready to chat\");\n          this.updateControls(true);\n          this.dispatch(\"convai-ready\");\n        }),\n        client.on(\"disconnect\", () => {\n          this.setStatus(\"Session ended\");\n          this.updateControls(false);\n          this.showRetry();\n          this.dispatch(\"convai-disconnect\");\n        }),\n        client.on(\"error\", (error: unknown) => {\n          if (!controller.signal.aborted && this.controller === controller) {\n            void this.fail(error);\n          }\n        }),\n      ];\n\n      this.setStatus(\"Connecting…\");\n      await client.connectWithPublicationGrant(\n        launchToken,\n        { ...(coreUrl ? { url: coreUrl } : {}), signal: controller.signal },\n      );\n      if (!this.ready) this.setStatus(\"Connected; waiting for character…\");\n    } catch (error) {\n      if (controller.signal.aborted || this.controller !== controller || !this.mounted) return;\n      await this.fail(error);\n    }\n  }\n\n  private async fail(error: unknown): Promise<void> {\n    if (this.failureReported) return;\n    this.failureReported = true;\n    const message = errorText(error);\n    this.setStatus(\"Unable to connect\");\n    this.setError(message);\n    this.updateControls(false);\n    this.showRetry();\n    this.dispatch(\"convai-error\", { message });\n    await this.cleanupClient();\n  }\n\n  private async cleanupClient(): Promise<void> {\n    this.unsubs.splice(0).forEach((unsubscribe) => unsubscribe());\n    const client = this.client;\n    this.client = null;\n    if (client) await client.disconnect().catch(() => undefined);\n  }\n\n  private renderDescriptor(): void {\n    const root = this.shadowRoot;\n    if (!root || !this.descriptor) return;\n    const title = root.querySelector(\"h2\");\n    if (title) title.textContent = this.descriptor.display_name;\n    const avatar = root.querySelector<HTMLImageElement>(\".avatar\");\n    if (avatar && this.descriptor.image_url) {\n      avatar.src = this.descriptor.image_url;\n      avatar.alt = this.descriptor.display_name;\n      avatar.hidden = false;\n    }\n  }\n\n  private renderMessages(): void {\n    const container = this.shadowRoot?.querySelector(\".messages\");\n    if (!container) return;\n    container.replaceChildren();\n    const visible = this.messages.filter(\n      (message) =>\n        VISIBLE_MESSAGE_TYPES.has(message.type) && Boolean(message.content?.trim()),\n    );\n    if (visible.length === 0) {\n      const empty = document.createElement(\"div\");\n      empty.className = \"empty\";\n      empty.textContent = this.descriptor?.description || \"Start a new private conversation.\";\n      container.appendChild(empty);\n      return;\n    }\n    visible.forEach((message) => {\n      const item = document.createElement(\"div\");\n      item.className = `message ${message.type.startsWith(\"user\") ? \"user\" : \"character\"}`;\n      item.textContent = message.content;\n      container.appendChild(item);\n    });\n    container.scrollTop = container.scrollHeight;\n  }\n\n  private setStatus(message: string): void {\n    const status = this.shadowRoot?.querySelector(\".status\");\n    if (status) status.textContent = message;\n  }\n\n  private setError(message: string): void {\n    const error = this.shadowRoot?.querySelector<HTMLElement>(\".error\");\n    if (!error) return;\n    error.textContent = message;\n    error.hidden = !message;\n  }\n\n  private updateControls(enabled: boolean): void {\n    const input = this.shadowRoot?.querySelector<HTMLInputElement>(\"input\");\n    const button = this.shadowRoot?.querySelector<HTMLButtonElement>(\".send\");\n    if (input) {\n      input.disabled = !enabled;\n      input.placeholder = enabled ? \"Type a message…\" : \"Preparing chat…\";\n    }\n    if (button) button.disabled = !enabled || !input?.value.trim();\n  }\n\n  private setResponseActive(active: boolean): void {\n    const interrupt = this.shadowRoot?.querySelector<HTMLButtonElement>(\".interrupt\");\n    if (interrupt) interrupt.hidden = !active;\n  }\n\n  private showRetry(): void {\n    const messages = this.shadowRoot?.querySelector(\".messages\");\n    if (!messages || messages.querySelector(\".retry\")) return;\n    const retry = document.createElement(\"button\");\n    retry.className = \"retry\";\n    retry.type = \"button\";\n    retry.textContent = \"Try again\";\n    retry.addEventListener(\"click\", () => void this.start(), { once: true });\n    messages.appendChild(retry);\n  }\n\n  private dispatch(name: string, detail?: Record<string, string>): void {\n    this.dispatchEvent(\n      new CustomEvent(name, { bubbles: true, composed: true, detail }),\n    );\n  }\n}\n\nexport function defineConvaiChatElement(\n  registry: CustomElementRegistry = customElements,\n): void {\n  if (!registry.get(\"convai-chat\")) {\n    registry.define(\"convai-chat\", ConvaiChatElement);\n  }\n}\n"]}

package/dist/embed/browser.d.ts

@@ -0,0 +1,3 @@
+export { ConvaiChatElement, defineConvaiChatElement } from "./ConvaiChatElement.js";
+export * from "./publicationApi.js";
+//# sourceMappingURL=browser.d.ts.map

package/dist/embed/browser.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"browser.d.ts","sourceRoot":"","sources":["../../src/embed/browser.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,iBAAiB,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AACjF,cAAc,kBAAkB,CAAC"}

package/dist/embed/browser.js

@@ -0,0 +1,5 @@
+import { defineConvaiChatElement } from "./ConvaiChatElement.js";
+defineConvaiChatElement();
+export { ConvaiChatElement, defineConvaiChatElement } from "./ConvaiChatElement.js";
+export * from "./publicationApi.js";
+//# sourceMappingURL=browser.js.map

package/dist/embed/browser.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"browser.js","sourceRoot":"","sources":["../../src/embed/browser.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAE9D,uBAAuB,EAAE,CAAC;AAE1B,OAAO,EAAE,iBAAiB,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AACjF,cAAc,kBAAkB,CAAC","sourcesContent":["import { defineConvaiChatElement } from \"./ConvaiChatElement\";\n\ndefineConvaiChatElement();\n\nexport { ConvaiChatElement, defineConvaiChatElement } from \"./ConvaiChatElement\";\nexport * from \"./publicationApi\";\n"]}