@cloudflare/ai-search-snippet 0.0.23 → 0.0.25

package/dist/search-snippet.es.js

@@ -1,23 +1,35 @@
-var A = Object.defineProperty;
-var R = (o, i, e) => i in o ? A(o, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[i] = e;
-var r = (o, i, e) => R(o, typeof i != "symbol" ? i + "" : i, e);
-function T(o, i) {
+var R = Object.defineProperty;
+var H = (o, i, e) => i in o ? R(o, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[i] = e;
+var a = (o, i, e) => H(o, typeof i != "symbol" ? i + "" : i, e);
+const d = [
+  "Searching...",
+  "Digging through results...",
+  "Scanning the knowledge base...",
+  "Finding the best matches...",
+  "Sifting through the data...",
+  "Almost there...",
+  "Looking far and wide...",
+  "Connecting the dots...",
+  "Rummaging through pages...",
+  "Hunting down answers..."
+];
+function A(o, i) {
   let e;
   return function(...s) {
-    const a = () => {
+    const r = () => {
       clearTimeout(e), o(...s);
     };
-    clearTimeout(e), e = setTimeout(a, i);
+    clearTimeout(e), e = setTimeout(r, i);
   };
 }
-function l(o) {
+function h(o) {
   const i = document.createElement("div");
   return i.textContent = o, i.innerHTML;
 }
-function C(o) {
+function S(o) {
   return new DOMParser().parseFromString(o, "text/html").documentElement.textContent || "";
 }
-function H(o) {
+function N(o) {
   const i = new Date(o), t = (/* @__PURE__ */ new Date()).getTime() - i.getTime();
   if (t < 6e4)
     return "Just now";
@@ -36,13 +48,13 @@ function H(o) {
     minute: "2-digit"
   });
 }
-function S(o = "id") {
+function E(o = "id") {
   return `${o}-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
 }
-function u(o, i) {
+function p(o, i) {
   return o !== null ? o : i;
 }
-function v(o, i) {
+function m(o, i) {
   return o === null ? i : o === "true" || o === "";
 }
 function f(o, i) {
@@ -50,7 +62,7 @@ function f(o, i) {
   const e = Number.parseInt(o, 10);
   return Number.isNaN(e) ? i : e;
 }
-function m(o, i) {
+function g(o, i) {
   return new CustomEvent(o, {
     detail: i,
     bubbles: !0,
@@ -63,10 +75,10 @@ function w(o) {
     throw new Error("API URL is required");
   return new P(o);
 }
-class N {
+class _ {
   constructor(i) {
-    r(this, "activeRequests", /* @__PURE__ */ new Map());
-    r(this, "baseUrl");
+    a(this, "activeRequests", /* @__PURE__ */ new Map());
+    a(this, "baseUrl");
     this.baseUrl = i.replace(/\/$/, "");
   }
   search(i, e) {
@@ -85,7 +97,7 @@ class N {
     throw new Error("Not implemented");
   }
 }
-class P extends N {
+class P extends _ {
   request(i = {}, e, t) {
     const s = e === "search" ? "snippet-search" : "snippet-chat-completions";
     return fetch(`${this.baseUrl}/${e}`, {
@@ -109,7 +121,7 @@ class P extends N {
    * Performs a search query with optional streaming
    */
   async search(i, e = {}) {
-    const t = this.generateRequestId(), s = new AbortController(), a = e.signal || s.signal;
+    const t = this.generateRequestId(), s = new AbortController(), r = e.signal || s.signal;
     this.registerRequest(t, s);
     try {
       const n = await this.request(
@@ -119,38 +131,32 @@ class P extends N {
           maxResults: 30
         },
         "search",
-        a
+        r
       );
       if (!n.ok)
         throw new Error(`HTTP error! status: ${n.status}`);
       if (!n.body)
         throw new Error("Response body is empty");
       const c = await n.json();
-      if (c.success && c.result) {
-        const h = /* @__PURE__ */ new Map();
-        for (const d of c.result.chunks) {
-          const g = d.item.key, p = d.scoring_details.vector_score;
-          (!h.has(g) || (h.get(g)?.score ?? 0) < p) && h.set(g, { chunk: d, score: p });
-        }
-        return Array.from(h.values()).sort((d, g) => g.score - d.score).slice(0, 10).map(
-          ({ chunk: d }) => ({
+      if (c.success && c.result)
+        return c.result.chunks.slice(0, 10).map(
+          (l) => ({
             type: "result",
-            id: d.id,
-            title: C(d.item.metadata.title),
-            description: d.item.metadata.description ? C(d.item.metadata.description) : "",
-            url: d.item.key,
-            image: d.item.metadata.image || void 0,
-            metadata: d.item.metadata
+            id: l.id,
+            title: S(l.item.metadata.title),
+            description: l.item.metadata.description ? S(l.item.metadata.description) : "",
+            url: l.item.key,
+            image: l.item.metadata.image || void 0,
+            metadata: l.item.metadata
           })
         );
-      }
       throw c.success === !1 ? new Error(c.error) : new Error("Unknown error");
     } finally {
       this.unregisterRequest(t);
     }
   }
   async *searchStream(i, e) {
-    const t = this.generateRequestId(), s = new AbortController(), a = e?.signal || s.signal;
+    const t = this.generateRequestId(), s = new AbortController(), r = e?.signal || s.signal;
     this.registerRequest(t, s);
     const n = await this.request(
       {
@@ -158,19 +164,19 @@ class P extends N {
         streaming: !0
       },
       "ai-search",
-      a
+      r
     );
     if (!n.ok)
       throw new Error(`HTTP error! status: ${n.status}`);
     if (!n.body)
       throw new Error("Response body is empty");
     let c = "";
-    const h = n.body.getReader(), d = new TextDecoder();
+    const l = n.body.getReader(), b = new TextDecoder();
     for (; ; ) {
-      const { done: p, value: k } = await h.read();
-      if (p)
+      const { done: u, value: C } = await l.read();
+      if (u)
         break;
-      const B = d.decode(k, { stream: !0 });
+      const B = b.decode(C, { stream: !0 });
       c += B;
     }
     yield {
@@ -179,13 +185,13 @@ class P extends N {
       title: "",
       description: c.replaceAll("data: ", "").trim().split(`
 
-`).map((p) => JSON.parse(p)).map((p) => p.response).join(""),
+`).map((u) => JSON.parse(u)).map((u) => u.response).join(""),
       url: "",
       metadata: {}
     };
   }
   async *chat(i, e) {
-    const t = new AbortController(), s = e?.signal || t.signal, a = await this.request(
+    const t = new AbortController(), s = e?.signal || t.signal, r = await this.request(
       {
         query: i,
         streaming: !1
@@ -193,13 +199,13 @@ class P extends N {
       "chat/completions",
       s
     );
-    if (!a.ok)
-      throw new Error(`HTTP error! status: ${a.status}`);
-    if (!a.body)
+    if (!r.ok)
+      throw new Error(`HTTP error! status: ${r.status}`);
+    if (!r.body)
       throw new Error("Response body is empty");
     yield {
       type: "text",
-      message: (await a.json()).choices.map((c) => c.message.content).join("")
+      message: (await r.json()).choices.map((c) => c.message.content).join("")
     };
   }
   /**
@@ -239,10 +245,10 @@ class P extends N {
     return `req-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
   }
 }
-const _ = `<svg width="32" height="10" viewBox="0 0 412 186" xmlns="http://www.w3.org/2000/svg" aria-label="Cloudflare" role="img">
+const V = `<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>`, j = "https://search.ai.cloudflare.com", y = `Powered by <a href="${j}" target="_blank" rel="noopener noreferrer">Cloudflare AI Search ${_}</a>`, $ = `
+</svg>`, D = "https://search.ai.cloudflare.com", y = `Powered by <a href="${D}" target="_blank" rel="noopener noreferrer">Cloudflare AI Search ${V}</a>`, $ = `
 /* Chat container */
 .chat-container {
   display: flex;
@@ -437,6 +443,10 @@ const _ = `<svg width="32" height="10" viewBox="0 0 412 186" xmlns="http://www.w
   }
 }
 
+.chat-streaming .loading-text {
+  margin-left: var(--search-snippet-spacing-xs);
+}
+
 /* Input area */
 .chat-input-area {
   padding: var(--search-snippet-spacing-md);
@@ -890,6 +900,27 @@ const _ = `<svg width="32" height="10" viewBox="0 0 412 186" xmlns="http://www.w
   to { transform: rotate(360deg); }
 }
 
+/* Loading message animation */
+@keyframes loading-message-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.loading-text {
+  font-size: var(--search-snippet-font-size-sm);
+  color: var(--search-snippet-text-secondary);
+}
+
+.loading-text-animate {
+  animation: loading-message-in 0.3s ease-out;
+}
+
 /* Error message */
 .error {
   padding: var(--search-snippet-spacing-md);
@@ -969,17 +1000,17 @@ const _ = `<svg width="32" height="10" viewBox="0 0 412 186" xmlns="http://www.w
   text-align: center;
 }
 `;
-function K(o) {
+function O(o) {
   let i = o;
-  i = V(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, a = "";
+  let s = !1, r = "";
   for (let n = 0; n < e.length; n++) {
-    const c = e[n], h = c.match(/^(#{1,6})\s+(.+)$/);
-    if (h) {
-      const p = h[1].length, k = h[2];
-      t.push(`<h${p}>${b(k)}</h${p}>`);
+    const c = e[n], l = c.match(/^(#{1,6})\s+(.+)$/);
+    if (l) {
+      const u = l[1].length, C = l[2];
+      t.push(`<h${u}>${v(C)}</h${u}>`);
       continue;
     }
     if (c.match(/^---+$/)) {
@@ -987,37 +1018,37 @@ function K(o) {
       continue;
     }
     if (c.match(/^>\s+/)) {
-      const p = c.replace(/^>\s+/, "");
-      t.push(`<blockquote>${b(p)}</blockquote>`);
+      const u = c.replace(/^>\s+/, "");
+      t.push(`<blockquote>${v(u)}</blockquote>`);
       continue;
     }
-    const d = c.match(/^[-*]\s+(.+)$/);
-    if (d) {
-      (!s || a !== "ul") && (s && t.push(`</${a}>`), t.push("<ul>"), s = !0, a = "ul"), t.push(`<li>${b(d[1])}</li>`);
+    const b = c.match(/^[-*]\s+(.+)$/);
+    if (b) {
+      (!s || r !== "ul") && (s && t.push(`</${r}>`), t.push("<ul>"), s = !0, r = "ul"), t.push(`<li>${v(b[1])}</li>`);
       continue;
     }
-    const g = c.match(/^\d+\.\s+(.+)$/);
-    if (g) {
-      (!s || a !== "ol") && (s && t.push(`</${a}>`), t.push("<ol>"), s = !0, a = "ol"), t.push(`<li>${b(g[1])}</li>`);
+    const k = c.match(/^\d+\.\s+(.+)$/);
+    if (k) {
+      (!s || r !== "ol") && (s && t.push(`</${r}>`), t.push("<ol>"), s = !0, r = "ol"), t.push(`<li>${v(k[1])}</li>`);
       continue;
     }
-    if (s && (t.push(`</${a}>`), s = !1, a = ""), c.trim() === "") {
+    if (s && (t.push(`</${r}>`), s = !1, r = ""), c.trim() === "") {
       t.push("<br />");
       continue;
     }
-    t.push(`<p>${b(c)}</p>`);
+    t.push(`<p>${v(c)}</p>`);
   }
-  return s && t.push(`</${a}>`), t.join(`
+  return s && t.push(`</${r}>`), t.join(`
 `);
 }
-function b(o) {
+function v(o) {
   let i = o;
   return i = i.replace(/`([^`]+)`/g, "<code>$1</code>"), i = i.replace(/\*\*\*(.+?)\*\*\*/g, "<strong><em>$1</em></strong>"), i = i.replace(/___(.+?)___/g, "<strong><em>$1</em></strong>"), i = i.replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>"), i = i.replace(/__(.+?)__/g, "<strong>$1</strong>"), i = i.replace(/\*(.+?)\*/g, "<em>$1</em>"), i = i.replace(/_(.+?)_/g, "<em>$1</em>"), i = i.replace(
     /\[([^\]]+)\]\(([^)]+)\)/g,
     '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>'
   ), i;
 }
-function V(o) {
+function j(o) {
   const i = {
     "&": "&amp;",
     "<": "&lt;",
@@ -1029,19 +1060,21 @@ function V(o) {
 }
 class q {
   constructor(i, e, t) {
-    r(this, "container");
-    r(this, "client");
-    r(this, "props");
-    r(this, "inputElement", null);
-    r(this, "messagesContainer", null);
-    r(this, "sendButton", null);
-    r(this, "messages", []);
-    r(this, "isStreaming", !1);
-    r(this, "currentStreamingMessageId", null);
+    a(this, "container");
+    a(this, "client");
+    a(this, "props");
+    a(this, "inputElement", null);
+    a(this, "messagesContainer", null);
+    a(this, "sendButton", null);
+    a(this, "messages", []);
+    a(this, "isStreaming", !1);
+    a(this, "currentStreamingMessageId", null);
+    a(this, "loadingMessageInterval", null);
+    a(this, "loadingMessageIndex", 0);
     // Event handler references for cleanup
-    r(this, "handleInputResize", null);
-    r(this, "handleInputKeydown", null);
-    r(this, "handleSendClick", null);
+    a(this, "handleInputResize", null);
+    a(this, "handleInputKeydown", null);
+    a(this, "handleSendClick", null);
     this.container = i, this.client = e, this.props = t, this.render(), this.attachEventListeners();
   }
   /**
@@ -1065,7 +1098,7 @@ class q {
           <div class="chat-input-wrapper">
             <textarea
               class="chat-input"
-              placeholder="${l(this.props.placeholder || "Type a message...")}"
+              placeholder="${h(this.props.placeholder || "Type a message...")}"
               aria-label="Chat message input"
               style="height: 40px;"
               rows="1"
@@ -1104,13 +1137,13 @@ class q {
    */
   async sendMessage(i) {
     const e = {
-      id: S("msg"),
+      id: E("msg"),
       role: "user",
       content: i,
       timestamp: Date.now()
     };
     this.addMessage(e), this.renderMessages(!0), this.setStreamingState(!0);
-    const t = S("msg"), s = {
+    const t = E("msg"), s = {
       id: t,
       role: "assistant",
       content: "",
@@ -1118,22 +1151,22 @@ class q {
     };
     this.addMessage(s), this.currentStreamingMessageId = t, this.renderMessages(!0);
     try {
-      const a = this.client.chat(i);
+      const r = this.client.chat(i);
       let n = "";
-      for await (const h of a)
-        if (h.type === "text" && h.message)
-          n += h.message, this.updateStreamingMessage(t, n);
-        else if (h.type === "error") {
-          this.showErrorInMessage(t, h.message || "Unknown error");
+      for await (const l of r)
+        if (l.type === "text" && l.message)
+          n += l.message, this.updateStreamingMessage(t, n);
+        else if (l.type === "error") {
+          this.showErrorInMessage(t, l.message || "Unknown error");
           break;
         }
-      const c = this.messages.findIndex((h) => h.id === t);
-      c !== -1 && (this.messages[c].content = n), this.container.dispatchEvent(m("message", { message: s }));
-    } catch (a) {
-      this.showErrorInMessage(t, a.message), this.container.dispatchEvent(
-        m("error", {
+      const c = this.messages.findIndex((l) => l.id === t);
+      c !== -1 && (this.messages[c].content = n), this.container.dispatchEvent(g("message", { message: s }));
+    } catch (r) {
+      this.showErrorInMessage(t, r.message), this.container.dispatchEvent(
+        g("error", {
           error: {
-            message: a.message,
+            message: r.message,
             code: "CHAT_ERROR"
           }
         })
@@ -1196,11 +1229,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">${K(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></div>' : ""}
+            ${i.content ? `<div class="chat-message-text">${O(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">${d[this.loadingMessageIndex]}</span></div>` : ""}
           </div>
           <div class="chat-message-metadata">
-            <span class="chat-message-time">${H(i.timestamp)}</span>
+            <span class="chat-message-time">${N(i.timestamp)}</span>
           </div>
         </div>
       </div>
@@ -1218,7 +1251,15 @@ class q {
    * Set streaming state
    */
   setStreamingState(i) {
-    this.isStreaming = i, this.inputElement && (this.inputElement.disabled = i), this.sendButton && (this.sendButton.disabled = i, this.sendButton.innerHTML = i ? '<div class="loading"></div>' : "<span>Send</span>");
+    this.isStreaming = i, this.inputElement && (this.inputElement.disabled = i), this.sendButton && (this.sendButton.disabled = i, this.sendButton.innerHTML = i ? '<div class="loading"></div>' : "<span>Send</span>"), i ? this.startLoadingMessages() : this.clearLoadingMessages();
+  }
+  startLoadingMessages() {
+    this.loadingMessageIndex = Math.floor(Math.random() * d.length), this.loadingMessageInterval = setInterval(() => {
+      this.loadingMessageIndex = (this.loadingMessageIndex + 1) % d.length, this.isStreaming && this.renderMessages(!0);
+    }, 2500);
+  }
+  clearLoadingMessages() {
+    this.loadingMessageInterval && (clearInterval(this.loadingMessageInterval), this.loadingMessageInterval = null);
   }
   /**
    * Get all messages
@@ -1242,31 +1283,31 @@ class q {
    * Destroy and cleanup
    */
   destroy() {
-    this.isStreaming && this.client.cancelAllRequests(), this.inputElement && (this.handleInputResize && this.inputElement.removeEventListener("input", this.handleInputResize), this.handleInputKeydown && this.inputElement.removeEventListener("keydown", this.handleInputKeydown)), this.sendButton && this.handleSendClick && this.sendButton.removeEventListener("click", this.handleSendClick), this.handleInputResize = null, this.handleInputKeydown = null, this.handleSendClick = null;
+    this.clearLoadingMessages(), this.isStreaming && this.client.cancelAllRequests(), this.inputElement && (this.handleInputResize && this.inputElement.removeEventListener("input", this.handleInputResize), this.handleInputKeydown && this.inputElement.removeEventListener("keydown", this.handleInputKeydown)), this.sendButton && this.handleSendClick && this.sendButton.removeEventListener("click", this.handleSendClick), this.handleInputResize = null, this.handleInputKeydown = null, this.handleSendClick = null;
   }
 }
-const E = "chat-bubble-snippet";
-class O extends HTMLElement {
+const M = "chat-bubble-snippet";
+class K extends HTMLElement {
   constructor() {
     super();
-    r(this, "shadow");
-    r(this, "client", null);
-    r(this, "chatView", null);
-    r(this, "container", null);
-    r(this, "isExpanded", !1);
-    r(this, "isMinimized", !1);
+    a(this, "shadow");
+    a(this, "client", null);
+    a(this, "chatView", null);
+    a(this, "container", null);
+    a(this, "isExpanded", !1);
+    a(this, "isMinimized", !1);
     // Event handler references for cleanup
-    r(this, "handleBubbleClick", null);
-    r(this, "handleCloseClick", null);
-    r(this, "handleMinimizeClick", null);
-    r(this, "handleClearClick", null);
+    a(this, "handleBubbleClick", null);
+    a(this, "handleCloseClick", null);
+    a(this, "handleMinimizeClick", null);
+    a(this, "handleClearClick", null);
     this.shadow = this.attachShadow({ mode: "open" });
   }
   static get observedAttributes() {
     return ["api-url", "placeholder", "theme", "hide-branding"];
   }
   connectedCallback() {
-    this.render(), this.initializeClient(), this.dispatchEvent(m("ready", void 0));
+    this.render(), this.initializeClient(), this.dispatchEvent(g("ready", void 0));
   }
   disconnectedCallback() {
     this.cleanup();
@@ -1276,10 +1317,10 @@ class O extends HTMLElement {
   }
   getProps() {
     return {
-      apiUrl: u(this.getAttribute("api-url"), "http://localhost:3000"),
-      placeholder: u(this.getAttribute("placeholder"), "Type a message..."),
-      theme: u(this.getAttribute("theme"), "auto"),
-      hideBranding: v(this.getAttribute("hide-branding"), !1)
+      apiUrl: p(this.getAttribute("api-url"), "http://localhost:3000"),
+      placeholder: p(this.getAttribute("placeholder"), "Type a message..."),
+      theme: p(this.getAttribute("theme"), "auto"),
+      hideBranding: m(this.getAttribute("hide-branding"), !1)
     };
   }
   initializeClient() {
@@ -1482,12 +1523,12 @@ ${this.getBubbleStyles()}`, this.container = document.createElement("div"), this
     `;
   }
   attachEventListeners() {
-    const e = this.shadow.querySelector(".bubble-button"), t = this.shadow.querySelector(".close-button"), s = this.shadow.querySelector(".minimize-button"), a = this.shadow.querySelector(".clear-button");
-    this.handleBubbleClick = () => this.toggleChat(), this.handleCloseClick = () => this.closeChat(), this.handleMinimizeClick = () => this.toggleMinimize(), this.handleClearClick = () => this.clearChat(), e?.addEventListener("click", this.handleBubbleClick), t?.addEventListener("click", this.handleCloseClick), s?.addEventListener("click", this.handleMinimizeClick), a?.addEventListener("click", this.handleClearClick);
+    const e = this.shadow.querySelector(".bubble-button"), t = this.shadow.querySelector(".close-button"), s = this.shadow.querySelector(".minimize-button"), r = this.shadow.querySelector(".clear-button");
+    this.handleBubbleClick = () => this.toggleChat(), this.handleCloseClick = () => this.closeChat(), this.handleMinimizeClick = () => this.toggleMinimize(), this.handleClearClick = () => this.clearChat(), e?.addEventListener("click", this.handleBubbleClick), t?.addEventListener("click", this.handleCloseClick), s?.addEventListener("click", this.handleMinimizeClick), r?.addEventListener("click", this.handleClearClick);
   }
   removeEventListeners() {
-    const e = this.shadow.querySelector(".bubble-button"), t = this.shadow.querySelector(".close-button"), s = this.shadow.querySelector(".minimize-button"), a = this.shadow.querySelector(".clear-button");
-    this.handleBubbleClick && e?.removeEventListener("click", this.handleBubbleClick), this.handleCloseClick && t?.removeEventListener("click", this.handleCloseClick), this.handleMinimizeClick && s?.removeEventListener("click", this.handleMinimizeClick), this.handleClearClick && a?.removeEventListener("click", this.handleClearClick), this.handleBubbleClick = null, this.handleCloseClick = null, this.handleMinimizeClick = null, this.handleClearClick = null;
+    const e = this.shadow.querySelector(".bubble-button"), t = this.shadow.querySelector(".close-button"), s = this.shadow.querySelector(".minimize-button"), r = this.shadow.querySelector(".clear-button");
+    this.handleBubbleClick && e?.removeEventListener("click", this.handleBubbleClick), this.handleCloseClick && t?.removeEventListener("click", this.handleCloseClick), this.handleMinimizeClick && s?.removeEventListener("click", this.handleMinimizeClick), this.handleClearClick && r?.removeEventListener("click", this.handleClearClick), this.handleBubbleClick = null, this.handleCloseClick = null, this.handleMinimizeClick = null, this.handleClearClick = null;
   }
   toggleChat() {
     this.isExpanded = !this.isExpanded;
@@ -1528,31 +1569,31 @@ ${this.getBubbleStyles()}`, this.container = document.createElement("div"), this
     return this.chatView?.getMessages() || [];
   }
 }
-customElements.get(E) || customElements.define(E, O);
-const M = "chat-page-snippet", L = "chat-page-sessions";
-class D extends HTMLElement {
+customElements.get(M) || customElements.define(M, K);
+const L = "chat-page-snippet", I = "chat-page-sessions";
+class U extends HTMLElement {
   constructor() {
     super();
-    r(this, "shadow");
-    r(this, "client", null);
-    r(this, "chatView", null);
-    r(this, "container", null);
-    r(this, "sessions", []);
-    r(this, "currentSessionId", null);
-    r(this, "sidebarCollapsed", !1);
+    a(this, "shadow");
+    a(this, "client", null);
+    a(this, "chatView", null);
+    a(this, "container", null);
+    a(this, "sessions", []);
+    a(this, "currentSessionId", null);
+    a(this, "sidebarCollapsed", !1);
     // Event handler references for cleanup
-    r(this, "handleClearClick", null);
-    r(this, "handleNewChatClick", null);
-    r(this, "handleToggleSidebarClick", null);
-    r(this, "handleChatListClick", null);
-    r(this, "handleMessageEvent", null);
+    a(this, "handleClearClick", null);
+    a(this, "handleNewChatClick", null);
+    a(this, "handleToggleSidebarClick", null);
+    a(this, "handleChatListClick", null);
+    a(this, "handleMessageEvent", null);
     this.shadow = this.attachShadow({ mode: "open" }), this.loadSessions();
   }
   static get observedAttributes() {
     return ["api-url", "placeholder", "theme", "hide-branding"];
   }
   connectedCallback() {
-    this.render(), this.initializeClient(), this.setupView(), this.dispatchEvent(m("ready", void 0));
+    this.render(), this.initializeClient(), this.setupView(), this.dispatchEvent(g("ready", void 0));
   }
   disconnectedCallback() {
     this.saveCurrentSession(), this.cleanup();
@@ -1562,10 +1603,10 @@ class D extends HTMLElement {
   }
   getProps() {
     return {
-      apiUrl: u(this.getAttribute("api-url"), "http://localhost:3000"),
-      placeholder: u(this.getAttribute("placeholder"), "Type a message..."),
-      theme: u(this.getAttribute("theme"), "auto"),
-      hideBranding: v(this.getAttribute("hide-branding"), !1)
+      apiUrl: p(this.getAttribute("api-url"), "http://localhost:3000"),
+      placeholder: p(this.getAttribute("placeholder"), "Type a message..."),
+      theme: p(this.getAttribute("theme"), "auto"),
+      hideBranding: m(this.getAttribute("hide-branding"), !1)
     };
   }
   initializeClient() {
@@ -1908,12 +1949,12 @@ ${this.getPageStyles()}`, this.container = document.createElement("div"), this.c
     `;
   }
   attachEventListeners() {
-    const e = this.shadow.querySelector(".clear-button"), t = this.shadow.querySelector(".new-chat-button"), s = this.shadow.querySelector(".toggle-sidebar-button"), a = this.shadow.querySelector(".chat-list");
-    this.handleClearClick = () => this.clearCurrentChat(), this.handleNewChatClick = () => this.createNewChat(), this.handleToggleSidebarClick = () => this.toggleSidebar(), this.handleChatListClick = (n) => this.onChatListClick(n), e?.addEventListener("click", this.handleClearClick), t?.addEventListener("click", this.handleNewChatClick), s?.addEventListener("click", this.handleToggleSidebarClick), a?.addEventListener("click", this.handleChatListClick);
+    const e = this.shadow.querySelector(".clear-button"), t = this.shadow.querySelector(".new-chat-button"), s = this.shadow.querySelector(".toggle-sidebar-button"), r = this.shadow.querySelector(".chat-list");
+    this.handleClearClick = () => this.clearCurrentChat(), this.handleNewChatClick = () => this.createNewChat(), this.handleToggleSidebarClick = () => this.toggleSidebar(), this.handleChatListClick = (n) => this.onChatListClick(n), e?.addEventListener("click", this.handleClearClick), t?.addEventListener("click", this.handleNewChatClick), s?.addEventListener("click", this.handleToggleSidebarClick), r?.addEventListener("click", this.handleChatListClick);
   }
   removeEventListeners() {
-    const e = this.shadow.querySelector(".clear-button"), t = this.shadow.querySelector(".new-chat-button"), s = this.shadow.querySelector(".toggle-sidebar-button"), a = this.shadow.querySelector(".chat-list"), n = this.shadow.querySelector(".container");
-    this.handleClearClick && e?.removeEventListener("click", this.handleClearClick), this.handleNewChatClick && t?.removeEventListener("click", this.handleNewChatClick), this.handleToggleSidebarClick && s?.removeEventListener("click", this.handleToggleSidebarClick), this.handleChatListClick && a?.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;
+    const e = this.shadow.querySelector(".clear-button"), t = this.shadow.querySelector(".new-chat-button"), s = this.shadow.querySelector(".toggle-sidebar-button"), r = this.shadow.querySelector(".chat-list"), n = this.shadow.querySelector(".container");
+    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;
@@ -1935,7 +1976,7 @@ ${this.getPageStyles()}`, this.container = document.createElement("div"), this.c
   }
   loadSessions() {
     try {
-      const e = localStorage.getItem(L);
+      const e = localStorage.getItem(I);
       e && (this.sessions = JSON.parse(e), this.sessions.sort((t, s) => s.updatedAt - t.updatedAt));
     } catch (e) {
       console.error("Failed to load chat sessions:", e);
@@ -1943,7 +1984,7 @@ ${this.getPageStyles()}`, this.container = document.createElement("div"), this.c
   }
   saveSessions() {
     try {
-      localStorage.setItem(L, JSON.stringify(this.sessions));
+      localStorage.setItem(I, JSON.stringify(this.sessions));
     } catch (e) {
       console.error("Failed to save chat sessions:", e);
     }
@@ -1998,9 +2039,9 @@ ${this.getPageStyles()}`, this.container = document.createElement("div"), this.c
       n && this.deleteSession(n);
       return;
     }
-    const a = t.closest(".chat-list-item");
-    if (a) {
-      const n = a.getAttribute("data-session-id");
+    const r = t.closest(".chat-list-item");
+    if (r) {
+      const n = r.getAttribute("data-session-id");
       n && this.switchToSession(n);
     }
   }
@@ -2031,7 +2072,7 @@ ${this.getPageStyles()}`, this.container = document.createElement("div"), this.c
     `;
   }
   formatDate(e) {
-    const t = new Date(e), a = (/* @__PURE__ */ new Date()).getTime() - t.getTime(), n = Math.floor(a / (1e3 * 60 * 60 * 24));
+    const t = new Date(e), r = (/* @__PURE__ */ new Date()).getTime() - t.getTime(), n = Math.floor(r / (1e3 * 60 * 60 * 24));
     return n === 0 ? t.toLocaleTimeString(void 0, { hour: "2-digit", minute: "2-digit" }) : n === 1 ? "Yesterday" : n < 7 ? t.toLocaleDateString(void 0, { weekday: "long" }) : t.toLocaleDateString(void 0, { month: "short", day: "numeric" });
   }
   escapeHTML(e) {
@@ -2061,8 +2102,8 @@ ${this.getPageStyles()}`, this.container = document.createElement("div"), this.c
     return this.sessions.find((e) => e.id === this.currentSessionId) || null;
   }
 }
-customElements.get(M) || customElements.define(M, D);
-const U = `
+customElements.get(L) || customElements.define(L, U);
+const G = `
 /* Search view states */
 .search-view {
   transition: var(--search-snippet-transition-slow);
@@ -2398,19 +2439,21 @@ a.search-result-item:focus-visible {
 class F extends HTMLElement {
   constructor() {
     super();
-    r(this, "shadow");
-    r(this, "client", null);
-    r(this, "container", null);
-    r(this, "inputElement", null);
-    r(this, "resultsContainer", null);
-    r(this, "searchButton", null);
-    r(this, "debouncedSearch", null);
-    r(this, "currentSearchController", null);
+    a(this, "shadow");
+    a(this, "client", null);
+    a(this, "container", null);
+    a(this, "inputElement", null);
+    a(this, "resultsContainer", null);
+    a(this, "searchButton", null);
+    a(this, "debouncedSearch", null);
+    a(this, "currentSearchController", null);
+    a(this, "loadingMessageInterval", null);
+    a(this, "loadingMessageIndex", 0);
     // Event handler references for cleanup
-    r(this, "handleInputChange", null);
-    r(this, "handleInputKeydownEnter", null);
-    r(this, "handleInputKeydownEscape", null);
-    r(this, "handleSearchButtonClick", null);
+    a(this, "handleInputChange", null);
+    a(this, "handleInputKeydownEnter", null);
+    a(this, "handleInputKeydownEscape", null);
+    a(this, "handleSearchButtonClick", null);
     this.shadow = this.attachShadow({ mode: "open" });
   }
   static get observedAttributes() {
@@ -2425,7 +2468,7 @@ class F extends HTMLElement {
     ];
   }
   connectedCallback() {
-    this.initializeClient(), this.render(), this.dispatchEvent(m("ready", void 0));
+    this.initializeClient(), this.render(), this.dispatchEvent(g("ready", void 0));
   }
   disconnectedCallback() {
     this.cleanup();
@@ -2435,13 +2478,13 @@ class F extends HTMLElement {
   }
   getProps() {
     return {
-      apiUrl: u(this.getAttribute("api-url"), "http://localhost:3000"),
-      placeholder: u(this.getAttribute("placeholder"), "Search..."),
+      apiUrl: p(this.getAttribute("api-url"), "http://localhost:3000"),
+      placeholder: p(this.getAttribute("placeholder"), "Search..."),
       maxResults: f(this.getAttribute("max-results"), 10),
       debounceMs: f(this.getAttribute("debounce-ms"), 300),
-      theme: u(this.getAttribute("theme"), "auto"),
-      hideBranding: v(this.getAttribute("hide-branding"), !1),
-      showUrl: v(this.getAttribute("show-url"), !1)
+      theme: p(this.getAttribute("theme"), "auto"),
+      hideBranding: m(this.getAttribute("hide-branding"), !1),
+      showUrl: m(this.getAttribute("show-url"), !1)
     };
   }
   initializeClient() {
@@ -2457,14 +2500,14 @@ class F extends HTMLElement {
     }
   }
   render() {
-    const e = this.getProps(), t = (a) => this.performSearch(a);
-    this.debouncedSearch = T(
+    const e = this.getProps(), t = (r) => this.performSearch(r);
+    this.debouncedSearch = A(
       t,
       e.debounceMs || 400
     );
     const s = document.createElement("style");
     s.textContent = `${x}
-${U}`, this.container = document.createElement("div"), this.container.className = "container", this.container.innerHTML = `
+${G}`, this.container = document.createElement("div"), this.container.className = "container", this.container.innerHTML = `
             <div class="search-view"> 
                 <div class="search-input-wrapper">
                     <svg xmlns="http://www.w3.org/2000/svg" class="search-icon" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg>
@@ -2472,7 +2515,7 @@ ${U}`, this.container = document.createElement("div"), this.container.className
                         type="text"
                         name="search-input"
                         class="search-input"
-                        placeholder="${l(e.placeholder || "Search...")}"
+                        placeholder="${h(e.placeholder || "Search...")}"
                         aria-label="Search input"
                         autocomplete="off"
                     />
@@ -2523,17 +2566,17 @@ ${U}`, this.container = document.createElement("div"), this.container.className
     }
   }
   displayResults(e, t) {
-    if (!this.resultsContainer) return;
+    if (this.clearLoadingInterval(), !this.resultsContainer) return;
     if (e.length === 0) {
       this.showNoResultsState(t);
       return;
     }
-    const a = this.getProps().hideBranding ? "" : `<div class="powered-by-inline">${y}</div>`, n = `
+    const r = this.getProps().hideBranding ? "" : `<div class="powered-by-inline">${y}</div>`, n = `
             <div class="search-header">
                 <div class="search-count">
                     Found ${e.length} result${e.length === 1 ? "" : "s"}
                 </div>
-                ${a}
+                ${r}
             </div>
             <div class="search-results">
                 ${e.map((c) => this.renderResult(c)).join("")}
@@ -2544,12 +2587,12 @@ ${U}`, this.container = document.createElement("div"), this.container.className
   renderResult(e) {
     const t = this.getProps(), s = this.renderResultImage(e.image, e.title);
     return `
-            <a href="${e.url ? l(e.url) : "#"}" class="search-result-item" data-result-id="${l(e.url || "")}">
+            <a href="${e.url ? h(e.url) : "#"}" class="search-result-item" data-result-id="${h(e.url || "")}">
                 ${s}
                 <div class="search-result-content">
-                    <div class="search-result-title">${l(e.title || "")}</div>
-                    <div class="search-result-snippet">${l(e.description || "")}</div>
-                    ${t.showUrl && e.url ? `<span class="search-result-url">${l(e.url)}</span>` : ""}
+                    <div class="search-result-title">${h(e.title || "")}</div>
+                    <div class="search-result-snippet">${h(e.description || "")}</div>
+                    ${t.showUrl && e.url ? `<span class="search-result-url">${h(e.url)}</span>` : ""}
                 </div>
             </a>
         `;
@@ -2562,8 +2605,8 @@ ${U}`, this.container = document.createElement("div"), this.container.className
         <div class="search-result-image-placeholder" style="display: none;">${s}</div>
         <img 
           class="search-result-image" 
-          src="${l(e)}" 
-          alt="${l(t)}"
+          src="${h(e)}" 
+          alt="${h(t)}"
           loading="lazy"
         />
       </div>
@@ -2584,9 +2627,9 @@ ${U}`, this.container = document.createElement("div"), this.container.className
       s.addEventListener("load", () => {
         s.classList.add("loaded"), s.closest(".search-result-image-container")?.querySelector(".search-result-image-loading")?.remove();
       }), s.addEventListener("error", () => {
-        const a = s.closest(".search-result-image-container");
-        a?.querySelector(".search-result-image-loading")?.remove();
-        const n = a?.querySelector(
+        const r = s.closest(".search-result-image-container");
+        r?.querySelector(".search-result-image-loading")?.remove();
+        const n = r?.querySelector(
           ".search-result-image-placeholder"
         );
         n && (n.style.display = "flex"), s.style.display = "none";
@@ -2594,15 +2637,25 @@ ${U}`, this.container = document.createElement("div"), this.container.className
     });
   }
   showLoadingState() {
-    this.resultsContainer && (this.resultsContainer.innerHTML = `
+    this.resultsContainer && (this.clearLoadingInterval(), this.loadingMessageIndex = Math.floor(Math.random() * d.length), this.resultsContainer.innerHTML = `
             <div class="search-loading">
                 <div class="loading" aria-label="Loading"></div>
-                <div>Searching...</div>
+                <div class="loading-text loading-text-animate">${d[this.loadingMessageIndex]}</div>
             </div>
-        `);
+        `, this.startLoadingInterval());
+  }
+  startLoadingInterval() {
+    this.loadingMessageInterval = setInterval(() => {
+      this.loadingMessageIndex = (this.loadingMessageIndex + 1) % d.length;
+      const e = this.resultsContainer?.querySelector(".loading-text");
+      e && (e.classList.remove("loading-text-animate"), e.offsetWidth, e.textContent = d[this.loadingMessageIndex], e.classList.add("loading-text-animate"));
+    }, 2500);
+  }
+  clearLoadingInterval() {
+    this.loadingMessageInterval && (clearInterval(this.loadingMessageInterval), this.loadingMessageInterval = null);
   }
   showEmptyState() {
-    this.resultsContainer && (this.resultsContainer.innerHTML = `
+    this.clearLoadingInterval(), this.resultsContainer && (this.resultsContainer.innerHTML = `
             <div class="search-empty">
                 <svg class="search-empty-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                     <circle cx="11" cy="11" r="8"></circle>
@@ -2616,7 +2669,7 @@ ${U}`, this.container = document.createElement("div"), this.container.className
         `);
   }
   showNoResultsState(e) {
-    this.resultsContainer && (this.resultsContainer.innerHTML = `
+    this.clearLoadingInterval(), this.resultsContainer && (this.resultsContainer.innerHTML = `
             <div class="search-empty">
                 <svg class="search-empty-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                     <circle cx="11" cy="11" r="8"></circle>
@@ -2624,15 +2677,15 @@ ${U}`, this.container = document.createElement("div"), this.container.className
                 </svg>
                 <div class="search-empty-title">No Results Found</div>
                 <div class="search-empty-description">
-                    No results found for "${l(e)}"
+                    No results found for "${h(e)}"
                 </div>
             </div>
         `);
   }
   showErrorState(e) {
-    this.resultsContainer && (this.resultsContainer.innerHTML = `
+    this.clearLoadingInterval(), this.resultsContainer && (this.resultsContainer.innerHTML = `
             <div class="error">
-                <strong>Error:</strong> ${l(e)}
+                <strong>Error:</strong> ${h(e)}
             </div>
         `);
   }
@@ -2641,7 +2694,7 @@ ${U}`, this.container = document.createElement("div"), this.container.className
     t === "auto" ? this.removeAttribute("theme") : this.setAttribute("theme", t);
   }
   cleanup() {
-    this.currentSearchController && (this.currentSearchController.abort(), this.currentSearchController = null), this.client && this.client.cancelAllRequests(), this.inputElement && (this.handleInputChange && this.inputElement.removeEventListener("input", this.handleInputChange), this.handleInputKeydownEnter && this.inputElement.removeEventListener("keydown", this.handleInputKeydownEnter), this.handleInputKeydownEscape && window.removeEventListener("keydown", this.handleInputKeydownEscape)), this.searchButton && this.handleSearchButtonClick && this.searchButton.removeEventListener("click", this.handleSearchButtonClick), this.handleInputChange = null, this.handleInputKeydownEnter = null, this.handleInputKeydownEscape = null, this.handleSearchButtonClick = null;
+    this.clearLoadingInterval(), this.currentSearchController && (this.currentSearchController.abort(), this.currentSearchController = null), this.client && this.client.cancelAllRequests(), this.inputElement && (this.handleInputChange && this.inputElement.removeEventListener("input", this.handleInputChange), this.handleInputKeydownEnter && this.inputElement.removeEventListener("keydown", this.handleInputKeydownEnter), this.handleInputKeydownEscape && window.removeEventListener("keydown", this.handleInputKeydownEscape)), this.searchButton && this.handleSearchButtonClick && this.searchButton.removeEventListener("click", this.handleSearchButtonClick), this.handleInputChange = null, this.handleInputKeydownEnter = null, this.handleInputKeydownEscape = null, this.handleSearchButtonClick = null;
   }
   // Public API
   async search(e) {
@@ -2649,7 +2702,7 @@ ${U}`, this.container = document.createElement("div"), this.container.className
   }
 }
 customElements.get(z) || customElements.define(z, F);
-const G = `
+const Y = `
 /* Modal backdrop */
 .modal-backdrop {
   position: fixed;
@@ -3048,30 +3101,32 @@ a.modal-result-item:focus-visible {
 .modal-container.open {
   animation: modal-slide-in var(--search-snippet-transition) ease-out;
 }
-`, I = "search-modal-snippet";
-class Y extends HTMLElement {
+`, T = "search-modal-snippet";
+class W extends HTMLElement {
   constructor() {
     super();
-    r(this, "shadow");
-    r(this, "client", null);
-    r(this, "backdrop", null);
-    r(this, "modal", null);
-    r(this, "inputElement", null);
-    r(this, "resultsContainer", null);
-    r(this, "footerCount", null);
-    r(this, "isOpen", !1);
-    r(this, "results", []);
-    r(this, "activeIndex", -1);
-    r(this, "debouncedSearch", null);
-    r(this, "currentSearchController", null);
+    a(this, "shadow");
+    a(this, "client", null);
+    a(this, "backdrop", null);
+    a(this, "modal", null);
+    a(this, "inputElement", null);
+    a(this, "resultsContainer", null);
+    a(this, "footerCount", null);
+    a(this, "isOpen", !1);
+    a(this, "results", []);
+    a(this, "activeIndex", -1);
+    a(this, "debouncedSearch", null);
+    a(this, "currentSearchController", null);
+    a(this, "loadingMessageInterval", null);
+    a(this, "loadingMessageIndex", 0);
     // Event handler references for cleanup
-    r(this, "handleGlobalKeydown", null);
-    r(this, "handleInputChange", null);
-    r(this, "handleInputKeydown", null);
-    r(this, "handleBackdropClick", null);
+    a(this, "handleGlobalKeydown", null);
+    a(this, "handleInputChange", null);
+    a(this, "handleInputKeydown", null);
+    a(this, "handleBackdropClick", null);
     // Scroll lock state
-    r(this, "savedBodyStyles", null);
-    r(this, "savedHtmlOverflow", null);
+    a(this, "savedBodyStyles", null);
+    a(this, "savedHtmlOverflow", null);
     this.shadow = this.attachShadow({ mode: "open" });
   }
   static get observedAttributes() {
@@ -3088,7 +3143,7 @@ class Y extends HTMLElement {
     ];
   }
   connectedCallback() {
-    this.initializeClient(), this.render(), this.attachGlobalKeyboardShortcut(), this.dispatchEvent(m("ready", void 0));
+    this.initializeClient(), this.render(), this.attachGlobalKeyboardShortcut(), this.dispatchEvent(g("ready", void 0));
   }
   disconnectedCallback() {
     this.cleanup();
@@ -3098,15 +3153,15 @@ class Y extends HTMLElement {
   }
   getProps() {
     return {
-      apiUrl: u(this.getAttribute("api-url"), "http://localhost:3000"),
-      placeholder: u(this.getAttribute("placeholder"), "Search..."),
+      apiUrl: p(this.getAttribute("api-url"), "http://localhost:3000"),
+      placeholder: p(this.getAttribute("placeholder"), "Search..."),
       maxResults: f(this.getAttribute("max-results"), 10),
       debounceMs: f(this.getAttribute("debounce-ms"), 300),
-      theme: u(this.getAttribute("theme"), "auto"),
-      shortcut: u(this.getAttribute("shortcut"), "k"),
+      theme: p(this.getAttribute("theme"), "auto"),
+      shortcut: p(this.getAttribute("shortcut"), "k"),
       useMetaKey: this.getAttribute("use-meta-key") !== "false",
-      hideBranding: v(this.getAttribute("hide-branding"), !1),
-      showUrl: v(this.getAttribute("show-url"), !1)
+      hideBranding: m(this.getAttribute("hide-branding"), !1),
+      showUrl: m(this.getAttribute("show-url"), !1)
     };
   }
   initializeClient() {
@@ -3123,14 +3178,14 @@ class Y extends HTMLElement {
   }
   render() {
     const e = this.getProps(), t = (c) => this.performSearch(c);
-    this.debouncedSearch = T(
+    this.debouncedSearch = A(
       t,
       e.debounceMs || 300
     );
     const s = document.createElement("style");
     s.textContent = `${x}
-${G}`;
-    const a = e.hideBranding ? "" : `<div class="powered-by-inline">${y}</div>`, n = document.createElement("div");
+${Y}`;
+    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">
@@ -3141,7 +3196,7 @@ ${G}`;
           <input
             type="text"
             class="modal-search-input"
-            placeholder="${l(e.placeholder || "Search...")}"
+            placeholder="${h(e.placeholder || "Search...")}"
             aria-label="Search"
             aria-autocomplete="list"
             aria-controls="modal-results-list"
@@ -3171,7 +3226,7 @@ ${G}`;
               <span>Close</span>
             </div>
           </div>
-          ${a}
+          ${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();
@@ -3224,7 +3279,7 @@ ${G}`;
     }
     const e = this.results[this.activeIndex];
     this.dispatchEvent(
-      m("result-select", {
+      g("result-select", {
         result: e,
         index: this.activeIndex
       })
@@ -3253,32 +3308,32 @@ ${G}`;
     }
   }
   displayResults(e, t) {
-    if (!this.resultsContainer) return;
+    if (this.clearLoadingInterval(), !this.resultsContainer) return;
     if (e.length === 0) {
       this.showNoResultsState(t);
       return;
     }
-    const s = e.map((a, n) => this.renderResult(a, n)).join("");
+    const s = e.map((r, n) => this.renderResult(r, n)).join("");
     this.resultsContainer.innerHTML = s, 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(), a = this.renderResultImage(e.image, e.title);
+    const s = this.getProps(), r = this.renderResultImage(e.image, e.title);
     return `
       <a 
-        href="${e.url ? l(e.url) : "#"}"
+        href="${e.url ? h(e.url) : "#"}"
         class="modal-result-item${t === this.activeIndex ? " active" : ""}" 
         role="option" 
         id="result-${t}"
         aria-selected="${t === this.activeIndex}"
         tabindex="-1"
         data-index="${t}"
-        data-url="${l(e.url || "")}"
+        data-url="${h(e.url || "")}"
       >
-        ${a}
+        ${r}
         <div class="modal-result-content">
-          <div class="modal-result-title">${l(e.title || "")}</div>
-          ${e.description ? `<div class="modal-result-description">${l(e.description)}</div>` : ""}
-          ${s.showUrl && e.url ? `<span class="modal-result-url">${l(e.url)}</span>` : ""}
+          <div class="modal-result-title">${h(e.title || "")}</div>
+          ${e.description ? `<div class="modal-result-description">${h(e.description)}</div>` : ""}
+          ${s.showUrl && e.url ? `<span class="modal-result-url">${h(e.url)}</span>` : ""}
         </div>
       </a>
     `;
@@ -3291,8 +3346,8 @@ ${G}`;
         <div class="modal-result-image-placeholder" style="display: none;">${s}</div>
         <img 
           class="modal-result-image" 
-          src="${l(e)}" 
-          alt="${l(t)}"
+          src="${h(e)}" 
+          alt="${h(t)}"
           loading="lazy"
         />
       </div>
@@ -3305,19 +3360,19 @@ ${G}`;
   attachResultHandlers() {
     const e = this.resultsContainer?.querySelectorAll(".modal-result-item");
     if (!e) return;
-    e.forEach((s, a) => {
+    e.forEach((s, r) => {
       s.getAttribute("href") === "#" && s.addEventListener("click", (c) => {
         c.preventDefault();
       }), s.addEventListener("mouseenter", () => {
-        this.activeIndex = a, this.updateActiveResult();
+        this.activeIndex = r, this.updateActiveResult();
       });
     }), this.resultsContainer?.querySelectorAll(".modal-result-image")?.forEach((s) => {
       s.addEventListener("load", () => {
         s.classList.add("loaded"), s.closest(".modal-result-image-container")?.querySelector(".modal-result-image-loading")?.remove();
       }), s.addEventListener("error", () => {
-        const a = s.closest(".modal-result-image-container");
-        a?.querySelector(".modal-result-image-loading")?.remove();
-        const n = a?.querySelector(
+        const r = s.closest(".modal-result-image-container");
+        r?.querySelector(".modal-result-image-loading")?.remove();
+        const n = r?.querySelector(
           ".modal-result-image-placeholder"
         );
         n && (n.style.display = "flex"), s.style.display = "none";
@@ -3336,32 +3391,42 @@ ${G}`;
     `;
   }
   showEmptyState() {
-    this.resultsContainer && (this.resultsContainer.innerHTML = this.renderEmptyState(), this.footerCount && (this.footerCount.textContent = ""), this.inputElement && this.inputElement.setAttribute("aria-expanded", "false"));
+    this.clearLoadingInterval(), this.resultsContainer && (this.resultsContainer.innerHTML = this.renderEmptyState(), this.footerCount && (this.footerCount.textContent = ""), this.inputElement && this.inputElement.setAttribute("aria-expanded", "false"));
   }
   showLoadingState() {
-    this.resultsContainer && (this.resultsContainer.innerHTML = `
+    this.resultsContainer && (this.clearLoadingInterval(), this.loadingMessageIndex = Math.floor(Math.random() * d.length), this.resultsContainer.innerHTML = `
       <div class="modal-loading">
         <div class="loading" aria-label="Loading"></div>
-        <div>Searching...</div>
+        <div class="loading-text loading-text-animate">${d[this.loadingMessageIndex]}</div>
       </div>
-    `, this.footerCount && (this.footerCount.textContent = "Searching..."));
+    `, this.footerCount && (this.footerCount.textContent = d[this.loadingMessageIndex]), this.startLoadingInterval());
+  }
+  startLoadingInterval() {
+    this.loadingMessageInterval = setInterval(() => {
+      this.loadingMessageIndex = (this.loadingMessageIndex + 1) % d.length;
+      const e = this.resultsContainer?.querySelector(".loading-text");
+      e && (e.classList.remove("loading-text-animate"), e.offsetWidth, e.textContent = d[this.loadingMessageIndex], e.classList.add("loading-text-animate")), this.footerCount && (this.footerCount.textContent = d[this.loadingMessageIndex]);
+    }, 2500);
+  }
+  clearLoadingInterval() {
+    this.loadingMessageInterval && (clearInterval(this.loadingMessageInterval), this.loadingMessageInterval = null);
   }
   showNoResultsState(e) {
-    this.resultsContainer && (this.resultsContainer.innerHTML = `
+    this.clearLoadingInterval(), this.resultsContainer && (this.resultsContainer.innerHTML = `
       <div class="modal-empty">
         <svg class="modal-empty-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
           <circle cx="11" cy="11" r="8"></circle>
           <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
         </svg>
         <div class="modal-empty-title">No results found</div>
-        <div class="modal-empty-description">No results for "${l(e)}"</div>
+        <div class="modal-empty-description">No results for "${h(e)}"</div>
       </div>
     `, this.footerCount && (this.footerCount.textContent = "0 results"), this.inputElement && this.inputElement.setAttribute("aria-expanded", "false"));
   }
   showErrorState(e) {
-    this.resultsContainer && (this.resultsContainer.innerHTML = `
+    this.clearLoadingInterval(), this.resultsContainer && (this.resultsContainer.innerHTML = `
       <div class="error">
-        <strong>Error:</strong> ${l(e)}
+        <strong>Error:</strong> ${h(e)}
       </div>
     `, this.footerCount && (this.footerCount.textContent = "Error"));
   }
@@ -3384,7 +3449,7 @@ ${G}`;
     document.documentElement.style.overflow = this.savedHtmlOverflow || "", document.body.style.overflow = this.savedBodyStyles.overflow, document.body.style.position = this.savedBodyStyles.position, document.body.style.top = this.savedBodyStyles.top, document.body.style.width = this.savedBodyStyles.width, window.scrollTo(0, e), this.savedBodyStyles = null, this.savedHtmlOverflow = null;
   }
   cleanup() {
-    this.currentSearchController && (this.currentSearchController.abort(), this.currentSearchController = null), this.handleGlobalKeydown && (document.removeEventListener("keydown", this.handleGlobalKeydown), this.handleGlobalKeydown = null), this.inputElement && (this.handleInputChange && this.inputElement.removeEventListener("input", this.handleInputChange), this.handleInputKeydown && this.inputElement.removeEventListener("keydown", this.handleInputKeydown)), this.backdrop && this.handleBackdropClick && this.backdrop.removeEventListener("click", this.handleBackdropClick), this.handleInputChange = null, this.handleInputKeydown = null, this.handleBackdropClick = null, this.client && this.client.cancelAllRequests();
+    this.clearLoadingInterval(), this.currentSearchController && (this.currentSearchController.abort(), this.currentSearchController = null), this.handleGlobalKeydown && (document.removeEventListener("keydown", this.handleGlobalKeydown), this.handleGlobalKeydown = null), this.inputElement && (this.handleInputChange && this.inputElement.removeEventListener("input", this.handleInputChange), this.handleInputKeydown && this.inputElement.removeEventListener("keydown", this.handleInputKeydown)), this.backdrop && this.handleBackdropClick && this.backdrop.removeEventListener("click", this.handleBackdropClick), this.handleInputChange = null, this.handleInputKeydown = null, this.handleBackdropClick = null, this.client && this.client.cancelAllRequests();
   }
   // Public API
   /**
@@ -3395,13 +3460,13 @@ ${G}`;
       requestAnimationFrame(() => {
         this.inputElement?.focus();
       });
-    }), this.lockBodyScroll(), this.dispatchEvent(m("open", void 0)));
+    }), this.lockBodyScroll(), this.dispatchEvent(g("open", void 0)));
   }
   /**
    * Close the search modal
    */
   close() {
-    this.isOpen && (this.isOpen = !1, this.backdrop?.classList.remove("open"), this.modal?.classList.remove("open"), this.inputElement && (this.inputElement.value = ""), this.results = [], this.activeIndex = -1, this.showEmptyState(), this.unlockBodyScroll(), this.dispatchEvent(m("close", void 0)));
+    this.isOpen && (this.isOpen = !1, this.backdrop?.classList.remove("open"), this.modal?.classList.remove("open"), this.inputElement && (this.inputElement.value = ""), this.results = [], this.activeIndex = -1, this.showEmptyState(), this.unlockBodyScroll(), this.dispatchEvent(g("close", void 0)));
   }
   /**
    * Toggle the search modal open/closed
@@ -3428,13 +3493,13 @@ ${G}`;
     return this.isOpen;
   }
 }
-customElements.get(I) || customElements.define(I, Y);
+customElements.get(T) || customElements.define(T, W);
 export {
   P as AISearchClient,
-  O as ChatBubbleSnippet,
-  D as ChatPageSnippet,
+  K as ChatBubbleSnippet,
+  U as ChatPageSnippet,
   F as SearchBarSnippet,
-  Y as SearchModalSnippet,
+  W as SearchModalSnippet,
   F as default
 };
 //# sourceMappingURL=search-snippet.es.js.map