@cloudflare/ai-search-snippet 0.0.31 → 0.0.33

package/dist/search-snippet.es.js

@@ -1,7 +1,7 @@
-var P = Object.defineProperty;
-var O = (n, i, e) => i in n ? P(n, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[i] = e;
-var a = (n, i, e) => O(n, typeof i != "symbol" ? i + "" : i, e);
-const u = [
+var U = Object.defineProperty;
+var _ = (n, i, e) => i in n ? U(n, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[i] = e;
+var a = (n, i, e) => _(n, typeof i != "symbol" ? i + "" : i, e);
+const g = [
   "Searching...",
   "Digging through results...",
   "Scanning the knowledge base...",
@@ -26,10 +26,17 @@ function h(n) {
   const i = document.createElement("div");
   return i.textContent = n, i.innerHTML;
 }
+function q(n) {
+  try {
+    return decodeURI(n);
+  } catch {
+    return n;
+  }
+}
 function E(n) {
   return new DOMParser().parseFromString(n, "text/html").documentElement.textContent || "";
 }
-function _(n) {
+function O(n) {
   const i = new Date(n), t = (/* @__PURE__ */ new Date()).getTime() - i.getTime();
   if (t < 6e4)
     return "Just now";
@@ -48,7 +55,7 @@ function _(n) {
     minute: "2-digit"
   });
 }
-function q(n) {
+function B(n) {
   return new Date(n).toLocaleDateString(void 0, {
     month: "short",
     day: "numeric"
@@ -79,34 +86,34 @@ function v(n, i) {
 function x(n) {
   if (!n)
     throw new Error("API URL is required");
-  return new V(n);
+  return new K(n);
 }
 function w(n) {
   return n !== null && typeof n == "object" && !Array.isArray(n);
 }
-function B(...n) {
+function R(...n) {
   const i = {};
   for (const e of n)
     if (e)
       for (const [t, s] of Object.entries(e)) {
         const r = i[t];
-        w(r) && w(s) ? i[t] = B(r, s) : i[t] = s;
+        w(r) && w(s) ? i[t] = R(r, s) : i[t] = s;
       }
   return i;
 }
-function U(n, i) {
+function D(n, i) {
   if (!w(i))
     return n;
   const e = new URLSearchParams();
-  for (const [l, g] of Object.entries(i))
-    g != null && e.append(l, String(g));
+  for (const [l, p] of Object.entries(i))
+    p != null && e.append(l, String(p));
   const t = e.toString();
   if (!t)
     return n;
   const s = n.indexOf("#"), r = s === -1 ? n : n.slice(0, s), o = s === -1 ? "" : n.slice(s), c = r.includes("?") ? "&" : "?";
   return `${r}${c}${t}${o}`;
 }
-function D(n) {
+function j(n) {
   if (!w(n))
     return {};
   const i = {};
@@ -114,22 +121,22 @@ function D(n) {
     t != null && (i[e] = String(t));
   return i;
 }
-function j(n) {
+function V(n) {
   return w(n) ? n : void 0;
 }
-class V {
+class K {
   constructor(i) {
     a(this, "activeRequests", /* @__PURE__ */ new Map());
     a(this, "baseUrl");
     this.baseUrl = i.replace(/\/$/, "");
   }
   request(i, e, t, s) {
-    const r = e === "search" ? "snippet-search" : "snippet-chat-completions", o = U(`${this.baseUrl}/${e}`, s?.queryParams);
+    const r = e === "search" ? "snippet-search" : "snippet-chat-completions", o = D(`${this.baseUrl}/${e}`, s?.queryParams);
     return fetch(o, {
       method: "POST",
-      body: JSON.stringify(B(j(s?.body), i)),
+      body: JSON.stringify(R(V(s?.body), i)),
       headers: {
-        ...D(s?.headers),
+        ...j(s?.headers),
         "Content-Type": "application/json",
         "cf-ai-search-source": r
       },
@@ -147,10 +154,10 @@ class V {
         {
           messages: [{ role: "user", content: i }],
           stream: !1,
-          max_results: e.maxResults ?? 30,
           ai_search_options: {
             retrieval: {
-              metadata_only: !0
+              metadata_only: !0,
+              max_num_results: e.maxResults ?? 30
             }
           }
         },
@@ -189,7 +196,7 @@ class V {
         messages: [{ role: "user", content: i }],
         stream: !0,
         ...e.maxResults !== void 0 && {
-          max_results: e.maxResults
+          max_num_results: e.maxResults
         }
       },
       "ai-search",
@@ -201,13 +208,13 @@ class V {
     if (!o.body)
       throw new Error("Response body is empty");
     let c = "";
-    const l = o.body.getReader(), g = new TextDecoder();
+    const l = o.body.getReader(), p = new TextDecoder();
     for (; ; ) {
-      const { done: p, value: S } = await l.read();
-      if (p)
+      const { done: u, value: S } = await l.read();
+      if (u)
         break;
-      const N = g.decode(S, { stream: !0 });
-      c += N;
+      const P = p.decode(S, { stream: !0 });
+      c += P;
     }
     yield {
       type: "result",
@@ -215,7 +222,7 @@ class V {
       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: {}
     };
@@ -275,10 +282,10 @@ class V {
     return `req-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
   }
 }
-const K = `<svg width="32" height="10" viewBox="0 0 412 186" xmlns="http://www.w3.org/2000/svg" aria-label="Cloudflare" role="img">
+const G = `<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>`, G = "https://workers.cloudflare.com/product/ai-search", k = `Powered by <a href="${G}" target="_blank" rel="noopener noreferrer">Cloudflare AI Search ${K}</a>`, R = `
+</svg>`, F = "https://workers.cloudflare.com/product/ai-search", k = `Powered by <a href="${F}" target="_blank" rel="noopener noreferrer">Cloudflare AI Search ${G}</a>`, H = `
 /* Chat container */
 .chat-container {
   display: flex;
@@ -1030,17 +1037,17 @@ const K = `<svg width="32" height="10" viewBox="0 0 412 186" xmlns="http://www.w
   text-align: center;
 }
 `;
-function F(n) {
+function Y(n) {
   let i = n;
-  i = Y(i), i = i.replace(/```([\s\S]*?)```/g, (o, c) => `<pre><code>${c.trim()}</code></pre>`);
+  i = J(i), i = i.replace(/```([\s\S]*?)```/g, (o, c) => `<pre><code>${c.trim()}</code></pre>`);
   const e = i.split(`
 `), t = [];
   let s = !1, r = "";
   for (let o = 0; o < e.length; o++) {
     const c = e[o], l = c.match(/^(#{1,6})\s+(.+)$/);
     if (l) {
-      const p = l[1].length, S = l[2];
-      t.push(`<h${p}>${f(S)}</h${p}>`);
+      const u = l[1].length, S = l[2];
+      t.push(`<h${u}>${f(S)}</h${u}>`);
       continue;
     }
     if (c.match(/^---+$/)) {
@@ -1048,13 +1055,13 @@ function F(n) {
       continue;
     }
     if (c.match(/^>\s+/)) {
-      const p = c.replace(/^>\s+/, "");
-      t.push(`<blockquote>${f(p)}</blockquote>`);
+      const u = c.replace(/^>\s+/, "");
+      t.push(`<blockquote>${f(u)}</blockquote>`);
       continue;
     }
-    const g = c.match(/^[-*]\s+(.+)$/);
-    if (g) {
-      (!s || r !== "ul") && (s && t.push(`</${r}>`), t.push("<ul>"), s = !0, r = "ul"), t.push(`<li>${f(g[1])}</li>`);
+    const p = c.match(/^[-*]\s+(.+)$/);
+    if (p) {
+      (!s || r !== "ul") && (s && t.push(`</${r}>`), t.push("<ul>"), s = !0, r = "ul"), t.push(`<li>${f(p[1])}</li>`);
       continue;
     }
     const b = c.match(/^\d+\.\s+(.+)$/);
@@ -1078,7 +1085,7 @@ function f(n) {
     '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>'
   ), i;
 }
-function Y(n) {
+function J(n) {
   const i = {
     "&": "&amp;",
     "<": "&lt;",
@@ -1088,7 +1095,7 @@ function Y(n) {
   };
   return n.replace(/[&<>"']/g, (e) => i[e] || e);
 }
-class H {
+class N {
   constructor(i, e, t) {
     a(this, "container");
     a(this, "client");
@@ -1259,11 +1266,11 @@ class H {
         <div class="chat-message-avatar">${s}</div>
         <div class="chat-message-content">
           <div class="chat-message-bubble">
-            ${i.content ? `<div class="chat-message-text">${F(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">${u[this.loadingMessageIndex]}</span></div>` : ""}
+            ${i.content ? `<div class="chat-message-text">${Y(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">${g[this.loadingMessageIndex]}</span></div>` : ""}
           </div>
           <div class="chat-message-metadata">
-            <span class="chat-message-time">${_(i.timestamp)}</span>
+            <span class="chat-message-time">${O(i.timestamp)}</span>
           </div>
         </div>
       </div>
@@ -1284,8 +1291,8 @@ class H {
     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() * u.length), this.loadingMessageInterval = setInterval(() => {
-      this.loadingMessageIndex = (this.loadingMessageIndex + 1) % u.length, this.isStreaming && this.renderMessages(!0);
+    this.loadingMessageIndex = Math.floor(Math.random() * g.length), this.loadingMessageInterval = setInterval(() => {
+      this.loadingMessageIndex = (this.loadingMessageIndex + 1) % g.length, this.isStreaming && this.renderMessages(!0);
     }, 2500);
   }
   clearLoadingMessages() {
@@ -1317,7 +1324,7 @@ class H {
   }
 }
 const L = "chat-bubble-snippet";
-class J extends HTMLElement {
+class W extends HTMLElement {
   constructor() {
     super();
     a(this, "shadow");
@@ -1368,7 +1375,7 @@ class J extends HTMLElement {
   render() {
     const e = document.createElement("style");
     e.textContent = `${C}
-${R}
+${H}
 ${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() {
@@ -1588,7 +1595,7 @@ ${this.getBubbleStyles()}`, this.container = document.createElement("div"), this
       return;
     }
     const t = this.getProps();
-    this.chatView = new H(e, this.client, t);
+    this.chatView = new N(e, this.client, t);
   }
   updateTheme(e) {
     (e === "light" || e === "dark" ? e : null) === null && this.hasAttribute("theme") && this.getAttribute("theme") !== "auto" && this.removeAttribute("theme");
@@ -1607,9 +1614,9 @@ ${this.getBubbleStyles()}`, this.container = document.createElement("div"), this
     return this.chatView?.getMessages() || [];
   }
 }
-customElements.get(L) || customElements.define(L, J);
+customElements.get(L) || customElements.define(L, W);
 const I = "chat-page-snippet", z = "chat-page-sessions";
-class W extends HTMLElement {
+class X extends HTMLElement {
   constructor() {
     super();
     a(this, "shadow");
@@ -1662,7 +1669,7 @@ class W extends HTMLElement {
   render() {
     const e = document.createElement("style");
     e.textContent = `${C}
-${R}
+${H}
 ${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() {
@@ -2006,7 +2013,7 @@ ${this.getPageStyles()}`, this.container = document.createElement("div"), this.c
     }
     if (!e) return;
     const t = this.getProps();
-    if (this.chatView = new H(e, this.client, t), this.sessions.length === 0)
+    if (this.chatView = new N(e, this.client, t), this.sessions.length === 0)
       this.createNewChat();
     else {
       const s = this.sessions[0];
@@ -2147,8 +2154,8 @@ ${this.getPageStyles()}`, this.container = document.createElement("div"), this.c
     return this.sessions.find((e) => e.id === this.currentSessionId) || null;
   }
 }
-customElements.get(I) || customElements.define(I, W);
-const X = `
+customElements.get(I) || customElements.define(I, X);
+const Z = `
 /* Search view states */
 .search-view {
   transition: var(--search-snippet-transition-slow);
@@ -2518,8 +2525,8 @@ a.search-result-item:focus-visible {
   border-radius: 2px;
   font-weight: var(--search-snippet-font-weight-medium);
 }
-`, A = "search-bar-snippet", Z = 10, Q = 100;
-class ee extends HTMLElement {
+`, A = "search-bar-snippet", Q = 10, ee = 100;
+class te extends HTMLElement {
   constructor() {
     super();
     a(this, "shadow");
@@ -2610,7 +2617,7 @@ class ee extends HTMLElement {
     );
     const s = document.createElement("style");
     s.textContent = `${C}
-${X}`, this.container = document.createElement("div"), this.container.className = "container", this.container.innerHTML = `
+${Z}`, 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>
@@ -2659,9 +2666,9 @@ ${X}`, this.container = document.createElement("div"), this.container.className
     try {
       const t = await this.client.search(e, {
         signal: this.currentSearchController.signal,
-        maxResults: Q,
+        maxResults: ee,
         request: this.getRequestOptions()
-      }), s = this.getProps(), r = t.slice(0, s.maxResults || Z);
+      }), s = this.getProps(), r = t.slice(0, s.maxResults || Q);
       this.displayResults(r, e, t.length);
     } catch (t) {
       if (t.name === "AbortError")
@@ -2677,7 +2684,7 @@ ${X}`, this.container = document.createElement("div"), this.container.className
       this.showNoResultsState(t);
       return;
     }
-    const r = this.getProps(), o = r.hideBranding ? "" : `<div class="powered-by-inline">${k}</div>`, c = s > e.length, l = c ? `Showing ${e.length} of ${s} results` : `Found ${s} result${s === 1 ? "" : "s"}`, g = r.seeMore && c ? `<div class="search-footer">
+    const r = this.getProps(), o = r.hideBranding ? "" : `<div class="powered-by-inline">${k}</div>`, c = s > e.length, l = c ? `Showing ${e.length} of ${s} results` : `Found ${s} result${s === 1 ? "" : "s"}`, p = r.seeMore && c ? `<div class="search-footer">
             <a href="${h(r.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>
@@ -2690,16 +2697,16 @@ ${X}`, this.container = document.createElement("div"), this.container.className
                 ${o}
             </div>
             <div class="search-results">
-                ${e.map((p) => this.renderResult(p)).join("")}
+                ${e.map((u) => this.renderResult(u)).join("")}
             </div>
-            ${g}
+            ${p}
         `;
     this.resultsContainer.innerHTML = b, this.attachResultHandlers();
   }
   renderResult(e) {
-    const t = this.getProps(), s = t.hideThumbnails ? "" : this.renderResultImage(e.image, e.title), r = e.url ? h(e.url) : "#", o = t.showDate && e.timestamp !== void 0 ? `<div class="search-result-date">${h(q(e.timestamp))}</div>` : "", c = t.showUrl && e.url || o ? `<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>'}
-            ${o}
+    const t = this.getProps(), s = t.hideThumbnails ? "" : this.renderResultImage(e.image, e.title), r = e.url ? h(e.url) : "#", o = e.url ? h(q(e.url)) : "", c = t.showDate && e.timestamp !== void 0 ? `<div class="search-result-date">${h(B(e.timestamp))}</div>` : "", l = t.showUrl && e.url || c ? `<div class="search-result-metadata">
+            ${t.showUrl && e.url ? `<span class="search-result-url">${o}</span>` : '<span class="search-result-url search-result-url-empty"></span>'}
+            ${c}
           </div>` : "";
     return `
             <a href="${r}" class="search-result-item" data-result-id="${h(e.url || "")}">
@@ -2707,7 +2714,7 @@ ${X}`, this.container = document.createElement("div"), this.container.className
                 <div class="search-result-content">
                     <div class="search-result-title">${h(e.title || "")}</div>
                     <div class="search-result-snippet">${h(e.description || "")}</div>
-                    ${c}
+                    ${l}
                 </div>
             </a>
         `;
@@ -2752,18 +2759,18 @@ ${X}`, this.container = document.createElement("div"), this.container.className
     });
   }
   showLoadingState() {
-    this.resultsContainer && (this.clearLoadingInterval(), this.loadingMessageIndex = Math.floor(Math.random() * u.length), this.resultsContainer.innerHTML = `
+    this.resultsContainer && (this.clearLoadingInterval(), this.loadingMessageIndex = Math.floor(Math.random() * g.length), this.resultsContainer.innerHTML = `
             <div class="search-loading">
                 <div class="loading" aria-label="Loading"></div>
-                <div class="loading-text loading-text-animate">${u[this.loadingMessageIndex]}</div>
+                <div class="loading-text loading-text-animate">${g[this.loadingMessageIndex]}</div>
             </div>
         `, this.startLoadingInterval());
   }
   startLoadingInterval() {
     this.loadingMessageInterval = setInterval(() => {
-      this.loadingMessageIndex = (this.loadingMessageIndex + 1) % u.length;
+      this.loadingMessageIndex = (this.loadingMessageIndex + 1) % g.length;
       const e = this.resultsContainer?.querySelector(".loading-text");
-      e && (e.classList.remove("loading-text-animate"), e.offsetWidth, e.textContent = u[this.loadingMessageIndex], e.classList.add("loading-text-animate"));
+      e && (e.classList.remove("loading-text-animate"), e.offsetWidth, e.textContent = g[this.loadingMessageIndex], e.classList.add("loading-text-animate"));
     }, 2500);
   }
   clearLoadingInterval() {
@@ -2819,8 +2826,8 @@ ${X}`, this.container = document.createElement("div"), this.container.className
     await this.performSearch(e);
   }
 }
-customElements.get(A) || customElements.define(A, ee);
-const te = `
+customElements.get(A) || customElements.define(A, te);
+const se = `
 /* Modal backdrop */
 .modal-backdrop {
   position: fixed;
@@ -3257,8 +3264,8 @@ a.modal-result-item:focus-visible {
 .modal-container.open {
   animation: modal-slide-in var(--search-snippet-transition) ease-out;
 }
-`, T = "search-modal-snippet", se = 10, ie = 100;
-class re extends HTMLElement {
+`, T = "search-modal-snippet", ie = 10, re = 100;
+class ae extends HTMLElement {
   constructor() {
     super();
     a(this, "shadow");
@@ -3360,7 +3367,7 @@ class re extends HTMLElement {
     );
     const s = document.createElement("style");
     s.textContent = `${C}
-${te}`;
+${se}`;
     const r = e.hideBranding ? "" : `<div class="powered-by-inline">${k}</div>`, o = document.createElement("div");
     o.innerHTML = `
       <div class="modal-backdrop" role="presentation"></div>
@@ -3474,10 +3481,10 @@ ${te}`;
     try {
       const t = await this.client.search(e, {
         signal: this.currentSearchController.signal,
-        maxResults: ie,
+        maxResults: re,
         request: this.getRequestOptions()
       }), s = this.getProps();
-      this.results = t.slice(0, s.maxResults || se), this.activeIndex = this.results.length > 0 ? 0 : -1, this.displayResults(this.results, e, t.length);
+      this.results = t.slice(0, s.maxResults || ie), this.activeIndex = this.results.length > 0 ? 0 : -1, this.displayResults(this.results, e, t.length);
     } catch (t) {
       if (t.name === "AbortError")
         return;
@@ -3492,16 +3499,16 @@ ${te}`;
       this.showNoResultsState(t);
       return;
     }
-    const r = this.getProps(), o = e.map((b, p) => this.renderResult(b, p)).join(""), c = s > e.length, l = c ? `Showing ${e.length} of ${s} results` : `${s} result${s === 1 ? "" : "s"}`, g = r.seeMore && c ? `<a href="${h(r.seeMore + encodeURIComponent(t))}" class="modal-see-more">
+    const r = this.getProps(), o = e.map((b, u) => this.renderResult(b, u)).join(""), c = s > e.length, l = c ? `Showing ${e.length} of ${s} results` : `${s} result${s === 1 ? "" : "s"}`, p = r.seeMore && c ? `<a href="${h(r.seeMore + encodeURIComponent(t))}" class="modal-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>
           </a>` : "";
-    this.resultsContainer.innerHTML = o + g, this.footerCount && (this.footerCount.textContent = l), this.inputElement && this.inputElement.setAttribute("aria-expanded", "true"), this.attachResultHandlers(), this.updateActiveResult();
+    this.resultsContainer.innerHTML = o + p, this.footerCount && (this.footerCount.textContent = l), 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), o = e.url ? h(e.url) : "#", c = s.showDate && e.timestamp !== void 0 ? `<div class="modal-result-date">${h(q(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}
+    const s = this.getProps(), r = s.hideThumbnails ? "" : this.renderResultImage(e.image, e.title), o = e.url ? h(e.url) : "#", c = e.url ? h(q(e.url)) : "", l = s.showDate && e.timestamp !== void 0 ? `<div class="modal-result-date">${h(B(e.timestamp))}</div>` : "", p = s.showUrl && e.url || l ? `<div class="modal-result-metadata">
+            ${s.showUrl && e.url ? `<span class="modal-result-url">${c}</span>` : '<span class="modal-result-url modal-result-url-empty"></span>'}
+            ${l}
           </div>` : "";
     return `
       <a 
@@ -3518,7 +3525,7 @@ ${te}`;
         <div class="modal-result-content">
           <div class="modal-result-title">${h(e.title || "")}</div>
           ${e.description ? `<div class="modal-result-description">${h(e.description)}</div>` : ""}
-          ${l}
+          ${p}
         </div>
       </a>
     `;
@@ -3579,18 +3586,18 @@ ${te}`;
     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.clearLoadingInterval(), this.loadingMessageIndex = Math.floor(Math.random() * u.length), this.resultsContainer.innerHTML = `
+    this.resultsContainer && (this.clearLoadingInterval(), this.loadingMessageIndex = Math.floor(Math.random() * g.length), this.resultsContainer.innerHTML = `
       <div class="modal-loading">
         <div class="loading" aria-label="Loading"></div>
-        <div class="loading-text loading-text-animate">${u[this.loadingMessageIndex]}</div>
+        <div class="loading-text loading-text-animate">${g[this.loadingMessageIndex]}</div>
       </div>
-    `, this.footerCount && (this.footerCount.textContent = u[this.loadingMessageIndex]), this.startLoadingInterval());
+    `, this.footerCount && (this.footerCount.textContent = g[this.loadingMessageIndex]), this.startLoadingInterval());
   }
   startLoadingInterval() {
     this.loadingMessageInterval = setInterval(() => {
-      this.loadingMessageIndex = (this.loadingMessageIndex + 1) % u.length;
+      this.loadingMessageIndex = (this.loadingMessageIndex + 1) % g.length;
       const e = this.resultsContainer?.querySelector(".loading-text");
-      e && (e.classList.remove("loading-text-animate"), e.offsetWidth, e.textContent = u[this.loadingMessageIndex], e.classList.add("loading-text-animate")), this.footerCount && (this.footerCount.textContent = u[this.loadingMessageIndex]);
+      e && (e.classList.remove("loading-text-animate"), e.offsetWidth, e.textContent = g[this.loadingMessageIndex], e.classList.add("loading-text-animate")), this.footerCount && (this.footerCount.textContent = g[this.loadingMessageIndex]);
     }, 2500);
   }
   clearLoadingInterval() {
@@ -3681,13 +3688,13 @@ ${te}`;
     return this.isOpen;
   }
 }
-customElements.get(T) || customElements.define(T, re);
+customElements.get(T) || customElements.define(T, ae);
 export {
-  V as AISearchClient,
-  J as ChatBubbleSnippet,
-  W as ChatPageSnippet,
-  ee as SearchBarSnippet,
-  re as SearchModalSnippet,
-  ee as default
+  K as AISearchClient,
+  W as ChatBubbleSnippet,
+  X as ChatPageSnippet,
+  te as SearchBarSnippet,
+  ae as SearchModalSnippet,
+  te as default
 };
 //# sourceMappingURL=search-snippet.es.js.map