@cloudflare/ai-search-snippet 0.0.27 → 0.0.28

package/dist/main.d.ts

@@ -218,6 +218,7 @@ declare class SearchBarSnippet extends HTMLElement {
     private showEmptyState;
     private showNoResultsState;
     private showErrorState;
+    private showMissingApiUrlError;
     private updateTheme;
     private cleanup;
     search(query: string): Promise<void>;
@@ -279,6 +280,7 @@ export declare class SearchModalSnippet extends HTMLElement {
     private clearLoadingInterval;
     private showNoResultsState;
     private showErrorState;
+    private showMissingApiUrlError;
     private updateTheme;
     private lockBodyScroll;
     private unlockBodyScroll;

package/dist/search-snippet.es.js

@@ -13,7 +13,7 @@ const p = [
   "Rummaging through pages...",
   "Hunting down answers..."
 ];
-function $(o, i) {
+function A(o, i) {
   let e;
   return function(...s) {
     const r = () => {
@@ -29,7 +29,7 @@ function h(o) {
 function S(o) {
   return new DOMParser().parseFromString(o, "text/html").documentElement.textContent || "";
 }
-function D(o) {
+function P(o) {
   const i = new Date(o), t = (/* @__PURE__ */ new Date()).getTime() - i.getTime();
   if (t < 6e4)
     return "Just now";
@@ -48,7 +48,7 @@ function D(o) {
     minute: "2-digit"
   });
 }
-function A(o) {
+function $(o) {
   return new Date(o).toLocaleDateString(void 0, {
     month: "short",
     day: "numeric"
@@ -79,9 +79,9 @@ function m(o, i) {
 function w(o) {
   if (!o)
     throw new Error("API URL is required");
-  return new _(o);
+  return new D(o);
 }
-class _ {
+class D {
   constructor(i) {
     a(this, "activeRequests", /* @__PURE__ */ new Map());
     a(this, "baseUrl");
@@ -235,10 +235,10 @@ class _ {
     return `req-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
   }
 }
-const P = `<svg width="32" height="10" viewBox="0 0 412 186" xmlns="http://www.w3.org/2000/svg" aria-label="Cloudflare" role="img">
+const _ = `<svg width="32" height="10" viewBox="0 0 412 186" xmlns="http://www.w3.org/2000/svg" aria-label="Cloudflare" role="img">
   <path fill="#f38020" d="m280.8395,183.31456c11,-26 -4,-38 -19,-38l-148,-2c-4,0 -4,-6 1,-7l150,-2c17,-1 37,-15 43,-33c0,0 10,-21 9,-24a97,97 0 0 0 -187,-11c-38,-25 -78,9 -69,46c-48,3 -65,46 -60,72c0,1 1,2 3,2l274,0c1,0 3,-1 3,-3z"/>
   <path fill="#faae40" d="m330.8395,81.31456c-4,0 -6,-1 -7,1l-5,21c-5,16 3,30 20,31l32,2c4,0 4,6 -1,7l-33,1c-36,4 -46,39 -46,39c0,2 0,3 2,3l113,0l3,-2a81,81 0 0 0 -78,-103"/>
-</svg>`, V = "https://workers.cloudflare.com/product/ai-search", x = `Powered by <a href="${V}" target="_blank" rel="noopener noreferrer">Cloudflare AI Search ${P}</a>`, B = `
+</svg>`, U = "https://workers.cloudflare.com/product/ai-search", y = `Powered by <a href="${U}" target="_blank" rel="noopener noreferrer">Cloudflare AI Search ${_}</a>`, q = `
 /* Chat container */
 .chat-container {
   display: flex;
@@ -555,7 +555,7 @@ const P = `<svg width="32" height="10" viewBox="0 0 412 186" xmlns="http://www.w
 .chat-message-bubble a:hover {
   text-decoration: none;
 }
-`, y = `
+`, x = `
 :host {
   /* Colors - Light Mode */
   --search-snippet-primary-color: #2563eb;
@@ -990,9 +990,9 @@ const P = `<svg width="32" height="10" viewBox="0 0 412 186" xmlns="http://www.w
   text-align: center;
 }
 `;
-function j(o) {
+function V(o) {
   let i = o;
-  i = O(i), i = i.replace(/```([\s\S]*?)```/g, (n, c) => `<pre><code>${c.trim()}</code></pre>`);
+  i = j(i), i = i.replace(/```([\s\S]*?)```/g, (n, c) => `<pre><code>${c.trim()}</code></pre>`);
   const e = i.split(`
 `), t = [];
   let s = !1, r = "";
@@ -1038,7 +1038,7 @@ function v(o) {
     '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>'
   ), i;
 }
-function O(o) {
+function j(o) {
   const i = {
     "&": "&amp;",
     "<": "&lt;",
@@ -1048,7 +1048,7 @@ function O(o) {
   };
   return o.replace(/[&<>"']/g, (e) => i[e] || e);
 }
-class q {
+class B {
   constructor(i, e, t) {
     a(this, "container");
     a(this, "client");
@@ -1219,11 +1219,11 @@ class q {
         <div class="chat-message-avatar">${s}</div>
         <div class="chat-message-content">
           <div class="chat-message-bubble">
-            ${i.content ? `<div class="chat-message-text">${j(i.content)}</div>` : ""}
+            ${i.content ? `<div class="chat-message-text">${V(i.content)}</div>` : ""}
             ${e ? `<div class="chat-streaming"><span class="chat-streaming-dot"></span><span class="chat-streaming-dot"></span><span class="chat-streaming-dot"></span><span class="loading-text">${p[this.loadingMessageIndex]}</span></div>` : ""}
           </div>
           <div class="chat-message-metadata">
-            <span class="chat-message-time">${D(i.timestamp)}</span>
+            <span class="chat-message-time">${P(i.timestamp)}</span>
           </div>
         </div>
       </div>
@@ -1277,7 +1277,7 @@ class q {
   }
 }
 const E = "chat-bubble-snippet";
-class K extends HTMLElement {
+class O extends HTMLElement {
   constructor() {
     super();
     a(this, "shadow");
@@ -1307,7 +1307,7 @@ class K extends HTMLElement {
   }
   getProps() {
     return {
-      apiUrl: d(this.getAttribute("api-url"), "http://localhost:3000"),
+      apiUrl: d(this.getAttribute("api-url"), ""),
       placeholder: d(this.getAttribute("placeholder"), "Type a message..."),
       theme: d(this.getAttribute("theme"), "auto"),
       hideBranding: g(this.getAttribute("hide-branding"), !1)
@@ -1316,7 +1316,7 @@ class K extends HTMLElement {
   initializeClient() {
     const e = this.getProps();
     if (!e.apiUrl) {
-      console.error("ChatBubbleSnippet: api-url attribute is required");
+      console.error("ChatBubbleSnippet: api-url attribute is required"), this.client = null;
       return;
     }
     try {
@@ -1327,8 +1327,8 @@ class K extends HTMLElement {
   }
   render() {
     const e = document.createElement("style");
-    e.textContent = `${y}
-${B}
+    e.textContent = `${x}
+${q}
 ${this.getBubbleStyles()}`, this.container = document.createElement("div"), this.container.className = "chat-bubble-widget", this.container.innerHTML = this.getBaseHTML(), this.shadow.innerHTML = "", this.shadow.appendChild(e), this.shadow.appendChild(this.container), this.attachEventListeners();
   }
   getBubbleStyles() {
@@ -1508,7 +1508,7 @@ ${this.getBubbleStyles()}`, this.container = document.createElement("div"), this
           </div>
         </div>
         <div class="chat-content"></div>
-        ${this.getProps().hideBranding ? "" : `<div class="powered-by">${x}</div>`}
+        ${this.getProps().hideBranding ? "" : `<div class="powered-by">${y}</div>`}
       </div>
     `;
   }
@@ -1536,11 +1536,19 @@ ${this.getBubbleStyles()}`, this.container = document.createElement("div"), this
     this.isMinimized ? e?.classList.add("minimized") : e?.classList.remove("minimized");
   }
   initializeChatView() {
-    if (this.chatView || !this.client) return;
+    if (this.chatView) return;
     const e = this.shadow.querySelector(".chat-content");
     if (!e) return;
+    if (!this.client) {
+      e.innerHTML = `
+        <div style="padding: 16px; color: var(--search-snippet-error-color, #ef4444); font-family: var(--search-snippet-font-family, sans-serif); font-size: var(--search-snippet-font-size-base, 14px);">
+          <strong>Error:</strong> The <code>api-url</code> attribute is required. Please provide a valid API URL.
+        </div>
+      `;
+      return;
+    }
     const t = this.getProps();
-    this.chatView = new q(e, this.client, t);
+    this.chatView = new B(e, this.client, t);
   }
   updateTheme(e) {
     (e === "light" || e === "dark" ? e : null) === null && this.hasAttribute("theme") && this.getAttribute("theme") !== "auto" && this.removeAttribute("theme");
@@ -1559,9 +1567,9 @@ ${this.getBubbleStyles()}`, this.container = document.createElement("div"), this
     return this.chatView?.getMessages() || [];
   }
 }
-customElements.get(E) || customElements.define(E, K);
+customElements.get(E) || customElements.define(E, O);
 const L = "chat-page-snippet", I = "chat-page-sessions";
-class U extends HTMLElement {
+class K extends HTMLElement {
   constructor() {
     super();
     a(this, "shadow");
@@ -1593,7 +1601,7 @@ class U extends HTMLElement {
   }
   getProps() {
     return {
-      apiUrl: d(this.getAttribute("api-url"), "http://localhost:3000"),
+      apiUrl: d(this.getAttribute("api-url"), ""),
       placeholder: d(this.getAttribute("placeholder"), "Type a message..."),
       theme: d(this.getAttribute("theme"), "auto"),
       hideBranding: g(this.getAttribute("hide-branding"), !1)
@@ -1602,7 +1610,7 @@ class U extends HTMLElement {
   initializeClient() {
     const e = this.getProps();
     if (!e.apiUrl) {
-      console.error("ChatPageSnippet: api-url attribute is required");
+      console.error("ChatPageSnippet: api-url attribute is required"), this.client = null;
       return;
     }
     try {
@@ -1613,8 +1621,8 @@ class U extends HTMLElement {
   }
   render() {
     const e = document.createElement("style");
-    e.textContent = `${y}
-${B}
+    e.textContent = `${x}
+${q}
 ${this.getPageStyles()}`, this.container = document.createElement("div"), this.container.className = "chat-page-container", this.container.innerHTML = this.getBaseHTML(), this.shadow.innerHTML = "", this.shadow.appendChild(e), this.shadow.appendChild(this.container), this.attachEventListeners();
   }
   getPageStyles() {
@@ -1906,7 +1914,7 @@ ${this.getPageStyles()}`, this.container = document.createElement("div"), this.c
           New Chat
         </button>
         <div class="chat-list"></div>
-        ${this.getProps().hideBranding ? "" : `<div class="powered-by">${x}</div>`}
+        ${this.getProps().hideBranding ? "" : `<div class="powered-by">${y}</div>`}
       </div>
       <div class="chat-main">
         <div class="chat-page-header">
@@ -1947,11 +1955,18 @@ ${this.getPageStyles()}`, this.container = document.createElement("div"), this.c
     this.handleClearClick && e?.removeEventListener("click", this.handleClearClick), this.handleNewChatClick && t?.removeEventListener("click", this.handleNewChatClick), this.handleToggleSidebarClick && s?.removeEventListener("click", this.handleToggleSidebarClick), this.handleChatListClick && r?.removeEventListener("click", this.handleChatListClick), this.handleMessageEvent && n && n.removeEventListener("message", this.handleMessageEvent), this.handleClearClick = null, this.handleNewChatClick = null, this.handleToggleSidebarClick = null, this.handleChatListClick = null, this.handleMessageEvent = null;
   }
   setupView() {
-    if (!this.client) return;
     const e = this.shadow.querySelector(".container");
+    if (!this.client) {
+      e && (e.innerHTML = `
+          <div style="padding: 16px; color: var(--search-snippet-error-color, #ef4444); font-family: var(--search-snippet-font-family, sans-serif); font-size: var(--search-snippet-font-size-base, 14px);">
+            <strong>Error:</strong> The <code>api-url</code> attribute is required. Please provide a valid API URL.
+          </div>
+        `);
+      return;
+    }
     if (!e) return;
     const t = this.getProps();
-    if (this.chatView = new q(e, this.client, t), this.sessions.length === 0)
+    if (this.chatView = new B(e, this.client, t), this.sessions.length === 0)
       this.createNewChat();
     else {
       const s = this.sessions[0];
@@ -2092,7 +2107,7 @@ ${this.getPageStyles()}`, this.container = document.createElement("div"), this.c
     return this.sessions.find((e) => e.id === this.currentSessionId) || null;
   }
 }
-customElements.get(L) || customElements.define(L, U);
+customElements.get(L) || customElements.define(L, K);
 const G = `
 /* Search view states */
 .search-view {
@@ -2509,7 +2524,7 @@ class F extends HTMLElement {
   }
   getProps() {
     return {
-      apiUrl: d(this.getAttribute("api-url"), "http://localhost:3000"),
+      apiUrl: d(this.getAttribute("api-url"), ""),
       placeholder: d(this.getAttribute("placeholder"), "Search..."),
       maxResults: f(this.getAttribute("max-results"), 10),
       debounceMs: f(this.getAttribute("debounce-ms"), 300),
@@ -2524,7 +2539,7 @@ class F extends HTMLElement {
   initializeClient() {
     const e = this.getProps();
     if (!e.apiUrl) {
-      console.error("SearchBarSnippet: api-url attribute is required");
+      console.error("SearchBarSnippet: api-url attribute is required"), this.client = null, this.showMissingApiUrlError();
       return;
     }
     try {
@@ -2535,12 +2550,12 @@ class F extends HTMLElement {
   }
   render() {
     const e = this.getProps(), t = (r) => this.performSearch(r);
-    this.debouncedSearch = $(
+    this.debouncedSearch = A(
       t,
       e.debounceMs || 400
     );
     const s = document.createElement("style");
-    s.textContent = `${y}
+    s.textContent = `${x}
 ${G}`, this.container = document.createElement("div"), this.container.className = "container", this.container.innerHTML = `
             <div class="search-view"> 
                 <div class="search-input-wrapper">
@@ -2563,7 +2578,7 @@ ${G}`, this.container = document.createElement("div"), this.container.className
                     </div>
                 </div>
             </div>
-        `, this.shadow.innerHTML = "", this.shadow.appendChild(s), this.shadow.appendChild(this.container), this.inputElement = this.container.querySelector(".search-input"), this.resultsContainer = this.container.querySelector(".search-results-wrapper"), this.searchButton = this.container.querySelector(".search-submit-button"), this.attachEventListeners();
+        `, this.shadow.innerHTML = "", this.shadow.appendChild(s), this.shadow.appendChild(this.container), this.inputElement = this.container.querySelector(".search-input"), this.resultsContainer = this.container.querySelector(".search-results-wrapper"), this.searchButton = this.container.querySelector(".search-submit-button"), this.attachEventListeners(), this.client || this.showMissingApiUrlError();
   }
   attachEventListeners() {
     this.inputElement && (this.handleInputChange = (e) => {
@@ -2582,21 +2597,23 @@ ${G}`, this.container = document.createElement("div"), this.container.className
     }, this.searchButton.addEventListener("click", this.handleSearchButtonClick)));
   }
   async performSearch(e) {
-    if (this.client) {
-      this.currentSearchController && (this.currentSearchController.abort(), this.currentSearchController = null), this.currentSearchController = new AbortController(), this.showLoadingState();
-      try {
-        const t = await this.client.search(e, {
-          streaming: !1,
-          signal: this.currentSearchController.signal
-        });
-        this.displayResults(t, e);
-      } catch (t) {
-        if (t.name === "AbortError")
-          return;
-        this.showErrorState(t.message);
-      } finally {
-        this.currentSearchController = null;
-      }
+    if (!this.client) {
+      this.showMissingApiUrlError();
+      return;
+    }
+    this.currentSearchController && (this.currentSearchController.abort(), this.currentSearchController = null), this.currentSearchController = new AbortController(), this.showLoadingState();
+    try {
+      const t = await this.client.search(e, {
+        streaming: !1,
+        signal: this.currentSearchController.signal
+      });
+      this.displayResults(t, e);
+    } catch (t) {
+      if (t.name === "AbortError")
+        return;
+      this.showErrorState(t.message);
+    } finally {
+      this.currentSearchController = null;
     }
   }
   displayResults(e, t) {
@@ -2605,7 +2622,7 @@ ${G}`, this.container = document.createElement("div"), this.container.className
       this.showNoResultsState(t);
       return;
     }
-    const s = this.getProps(), r = s.hideBranding ? "" : `<div class="powered-by-inline">${x}</div>`, n = s.seeMore ? `<div class="search-footer">
+    const s = this.getProps(), r = s.hideBranding ? "" : `<div class="powered-by-inline">${y}</div>`, n = s.seeMore ? `<div class="search-footer">
             <a href="${h(s.seeMore + encodeURIComponent(t))}" class="search-see-more">
               <span>See more results</span>
               <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
@@ -2625,7 +2642,7 @@ ${G}`, this.container = document.createElement("div"), this.container.className
     this.resultsContainer.innerHTML = c, this.attachResultHandlers();
   }
   renderResult(e) {
-    const t = this.getProps(), s = t.hideThumbnails ? "" : this.renderResultImage(e.image, e.title), r = e.url ? h(e.url) : "#", n = t.showDate && e.timestamp !== void 0 ? `<div class="search-result-date">${h(A(e.timestamp))}</div>` : "", c = t.showUrl && e.url || n ? `<div class="search-result-metadata">
+    const t = this.getProps(), s = t.hideThumbnails ? "" : this.renderResultImage(e.image, e.title), r = e.url ? h(e.url) : "#", n = t.showDate && e.timestamp !== void 0 ? `<div class="search-result-date">${h($(e.timestamp))}</div>` : "", c = t.showUrl && e.url || n ? `<div class="search-result-metadata">
             ${t.showUrl && e.url ? `<span class="search-result-url">${h(e.url)}</span>` : '<span class="search-result-url search-result-url-empty"></span>'}
             ${n}
           </div>` : "";
@@ -2732,6 +2749,9 @@ ${G}`, this.container = document.createElement("div"), this.container.className
             </div>
         `);
   }
+  showMissingApiUrlError() {
+    this.resultsContainer && this.showErrorState("The api-url attribute is required. Please provide a valid API URL.");
+  }
   updateTheme(e) {
     const t = e === "light" || e === "dark" || e === "auto" ? e : "auto";
     t === "auto" ? this.removeAttribute("theme") : this.setAttribute("theme", t);
@@ -3237,7 +3257,7 @@ class W extends HTMLElement {
   }
   getProps() {
     return {
-      apiUrl: d(this.getAttribute("api-url"), "http://localhost:3000"),
+      apiUrl: d(this.getAttribute("api-url"), ""),
       placeholder: d(this.getAttribute("placeholder"), "Search..."),
       maxResults: f(this.getAttribute("max-results"), 10),
       debounceMs: f(this.getAttribute("debounce-ms"), 300),
@@ -3254,7 +3274,7 @@ class W extends HTMLElement {
   initializeClient() {
     const e = this.getProps();
     if (!e.apiUrl) {
-      console.error("SearchModalSnippet: api-url attribute is required");
+      console.error("SearchModalSnippet: api-url attribute is required"), this.client = null, this.showMissingApiUrlError();
       return;
     }
     try {
@@ -3265,14 +3285,14 @@ class W extends HTMLElement {
   }
   render() {
     const e = this.getProps(), t = (c) => this.performSearch(c);
-    this.debouncedSearch = $(
+    this.debouncedSearch = A(
       t,
       e.debounceMs || 300
     );
     const s = document.createElement("style");
-    s.textContent = `${y}
+    s.textContent = `${x}
 ${Y}`;
-    const r = e.hideBranding ? "" : `<div class="powered-by-inline">${x}</div>`, n = document.createElement("div");
+    const r = e.hideBranding ? "" : `<div class="powered-by-inline">${y}</div>`, n = document.createElement("div");
     n.innerHTML = `
       <div class="modal-backdrop" role="presentation"></div>
       <div class="modal-container" role="dialog" aria-modal="true" aria-labelledby="modal-title">
@@ -3316,7 +3336,7 @@ ${Y}`;
           ${r}
         </div>
       </div>
-    `, this.shadow.innerHTML = "", this.shadow.appendChild(s), this.shadow.appendChild(n), this.backdrop = this.shadow.querySelector(".modal-backdrop"), this.modal = this.shadow.querySelector(".modal-container"), this.inputElement = this.shadow.querySelector(".modal-search-input"), this.resultsContainer = this.shadow.querySelector(".modal-results"), this.footerCount = this.shadow.querySelector(".modal-results-count"), this.attachEventListeners();
+    `, this.shadow.innerHTML = "", this.shadow.appendChild(s), this.shadow.appendChild(n), this.backdrop = this.shadow.querySelector(".modal-backdrop"), this.modal = this.shadow.querySelector(".modal-container"), this.inputElement = this.shadow.querySelector(".modal-search-input"), this.resultsContainer = this.shadow.querySelector(".modal-results"), this.footerCount = this.shadow.querySelector(".modal-results-count"), this.attachEventListeners(), this.client || this.showMissingApiUrlError();
   }
   attachGlobalKeyboardShortcut() {
     const e = this.getProps(), t = e.shortcut?.toLowerCase() || "k";
@@ -3377,21 +3397,23 @@ ${Y}`;
     t && e.url && t.click(), this.close();
   }
   async performSearch(e) {
-    if (this.client) {
-      this.currentSearchController && (this.currentSearchController.abort(), this.currentSearchController = null), this.currentSearchController = new AbortController(), this.showLoadingState();
-      try {
-        const t = await this.client.search(e, {
-          streaming: !1,
-          signal: this.currentSearchController.signal
-        }), s = this.getProps();
-        this.results = t.slice(0, s.maxResults || 10), this.activeIndex = this.results.length > 0 ? 0 : -1, this.displayResults(this.results, e);
-      } catch (t) {
-        if (t.name === "AbortError")
-          return;
-        this.showErrorState(t.message);
-      } finally {
-        this.currentSearchController = null;
-      }
+    if (!this.client) {
+      this.showMissingApiUrlError();
+      return;
+    }
+    this.currentSearchController && (this.currentSearchController.abort(), this.currentSearchController = null), this.currentSearchController = new AbortController(), this.showLoadingState();
+    try {
+      const t = await this.client.search(e, {
+        streaming: !1,
+        signal: this.currentSearchController.signal
+      }), s = this.getProps();
+      this.results = t.slice(0, s.maxResults || 10), this.activeIndex = this.results.length > 0 ? 0 : -1, this.displayResults(this.results, e);
+    } catch (t) {
+      if (t.name === "AbortError")
+        return;
+      this.showErrorState(t.message);
+    } finally {
+      this.currentSearchController = null;
     }
   }
   displayResults(e, t) {
@@ -3407,7 +3429,7 @@ ${Y}`;
     this.resultsContainer.innerHTML = r + n, this.footerCount && (this.footerCount.textContent = `${e.length} result${e.length === 1 ? "" : "s"}`), this.inputElement && this.inputElement.setAttribute("aria-expanded", "true"), this.attachResultHandlers(), this.updateActiveResult();
   }
   renderResult(e, t) {
-    const s = this.getProps(), r = s.hideThumbnails ? "" : this.renderResultImage(e.image, e.title), n = e.url ? h(e.url) : "#", c = s.showDate && e.timestamp !== void 0 ? `<div class="modal-result-date">${h(A(e.timestamp))}</div>` : "", l = s.showUrl && e.url || c ? `<div class="modal-result-metadata">
+    const s = this.getProps(), r = s.hideThumbnails ? "" : this.renderResultImage(e.image, e.title), n = e.url ? h(e.url) : "#", c = s.showDate && e.timestamp !== void 0 ? `<div class="modal-result-date">${h($(e.timestamp))}</div>` : "", l = s.showUrl && e.url || c ? `<div class="modal-result-metadata">
             ${s.showUrl && e.url ? `<span class="modal-result-url">${h(e.url)}</span>` : '<span class="modal-result-url modal-result-url-empty"></span>'}
             ${c}
           </div>` : "";
@@ -3523,6 +3545,9 @@ ${Y}`;
       </div>
     `, this.footerCount && (this.footerCount.textContent = "Error"));
   }
+  showMissingApiUrlError() {
+    this.resultsContainer && this.showErrorState("The api-url attribute is required. Please provide a valid API URL.");
+  }
   updateTheme(e) {
     const t = e === "light" || e === "dark" || e === "auto" ? e : "auto";
     t === "auto" ? this.removeAttribute("theme") : this.setAttribute("theme", t);
@@ -3588,9 +3613,9 @@ ${Y}`;
 }
 customElements.get(T) || customElements.define(T, W);
 export {
-  _ as AISearchClient,
-  K as ChatBubbleSnippet,
-  U as ChatPageSnippet,
+  D as AISearchClient,
+  O as ChatBubbleSnippet,
+  K as ChatPageSnippet,
   F as SearchBarSnippet,
   W as SearchModalSnippet,
   F as default