@cloudflare/ai-search-snippet 0.0.26 → 0.0.27

package/dist/main.d.ts

@@ -1,4 +1,7 @@
-export declare class AISearchClient extends Client {
+export declare class AISearchClient {
+    activeRequests: Map<string, RequestState>;
+    baseUrl: string;
+    constructor(baseUrl: string);
     private request;
     /**
      * Performs a search query with optional streaming
@@ -159,17 +162,6 @@ declare type ChatTextResponse = {
 
 declare type ChatTypes = ChatResult | ChatTextResponse | ChatError;
 
-declare class Client {
-    activeRequests: Map<string, RequestState>;
-    baseUrl: string;
-    constructor(baseUrl: string);
-    search(_query: string, _options?: SearchOptions): Promise<SearchResult[]>;
-    searchStream(_query: string, _options?: SearchOptions): AsyncGenerator<SearchResult | SearchError, void, undefined>;
-    chat(_message: string, _options?: SearchOptions): AsyncGenerator<ChatTypes, void, undefined>;
-    cancelRequest(_requestId: string): void;
-    cancelAllRequests(): void;
-}
-
 declare interface Message {
     id: string;
     role: 'user' | 'assistant' | 'system';
@@ -206,7 +198,7 @@ declare class SearchBarSnippet extends HTMLElement {
     private handleInputKeydownEnter;
     private handleInputKeydownEscape;
     private handleSearchButtonClick;
-    static get observedAttributes(): readonly ["api-url", "placeholder", "max-results", "debounce-ms", "theme", "hide-branding", "show-url", "hide-thumbnails", "see-more"];
+    static get observedAttributes(): readonly ["api-url", "placeholder", "max-results", "debounce-ms", "theme", "hide-branding", "show-url", "show-date", "hide-thumbnails", "see-more"];
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -262,7 +254,7 @@ export declare class SearchModalSnippet extends HTMLElement {
     private handleBackdropClick;
     private savedBodyStyles;
     private savedHtmlOverflow;
-    static get observedAttributes(): readonly ["api-url", "placeholder", "max-results", "theme", "shortcut", "use-meta-key", "debounce-ms", "hide-branding", "show-url", "hide-thumbnails", "see-more"];
+    static get observedAttributes(): readonly ["api-url", "placeholder", "max-results", "theme", "shortcut", "use-meta-key", "debounce-ms", "hide-branding", "show-url", "show-date", "hide-thumbnails", "see-more"];
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -334,6 +326,7 @@ export declare interface SearchResult {
     id: string;
     title: string;
     description: string;
+    timestamp?: number;
     url?: string;
     image?: string;
     metadata?: Record<string, unknown>;
@@ -358,6 +351,8 @@ export declare interface SearchSnippetProps {
     hideBranding?: boolean;
     /** Show URL in search results (default: false) */
     showUrl?: boolean;
+    /** Show date in search results when timestamp is present (default: false) */
+    showDate?: boolean;
     /** Hide thumbnails in search results (default: false) */
     hideThumbnails?: boolean;
     /** URL template for "See more" link. The search query is appended URL-encoded. Example: "https://example.com/search?q=" */

package/dist/search-snippet.es.js

@@ -1,6 +1,6 @@
-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);
+var H = Object.defineProperty;
+var N = (o, i, e) => i in o ? H(o, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[i] = e;
+var a = (o, i, e) => N(o, typeof i != "symbol" ? i + "" : i, e);
 const p = [
   "Searching...",
   "Digging through results...",
@@ -13,7 +13,7 @@ const p = [
   "Rummaging through pages...",
   "Hunting down answers..."
 ];
-function A(o, i) {
+function $(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 N(o) {
+function D(o) {
   const i = new Date(o), t = (/* @__PURE__ */ new Date()).getTime() - i.getTime();
   if (t < 6e4)
     return "Just now";
@@ -48,13 +48,19 @@ function N(o) {
     minute: "2-digit"
   });
 }
-function E(o = "id") {
+function A(o) {
+  return new Date(o).toLocaleDateString(void 0, {
+    month: "short",
+    day: "numeric"
+  });
+}
+function M(o = "id") {
   return `${o}-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
 }
 function d(o, i) {
   return o !== null ? o : i;
 }
-function m(o, i) {
+function g(o, i) {
   return o === null ? i : o === "true" || o === "";
 }
 function f(o, i) {
@@ -62,7 +68,7 @@ function f(o, i) {
   const e = Number.parseInt(o, 10);
   return Number.isNaN(e) ? i : e;
 }
-function g(o, i) {
+function m(o, i) {
   return new CustomEvent(o, {
     detail: i,
     bubbles: !0,
@@ -73,7 +79,7 @@ function g(o, i) {
 function w(o) {
   if (!o)
     throw new Error("API URL is required");
-  return new P(o);
+  return new _(o);
 }
 class _ {
   constructor(i) {
@@ -81,23 +87,6 @@ class _ {
     a(this, "baseUrl");
     this.baseUrl = i.replace(/\/$/, "");
   }
-  search(i, e) {
-    throw new Error("Not implemented");
-  }
-  searchStream(i, e) {
-    throw new Error("Not implemented");
-  }
-  chat(i, e) {
-    throw new Error("Not implemented");
-  }
-  cancelRequest(i) {
-    throw new Error("Not implemented");
-  }
-  cancelAllRequests() {
-    throw new Error("Not implemented");
-  }
-}
-class P extends _ {
   request(i = {}, e, t) {
     const s = e === "search" ? "snippet-search" : "snippet-chat-completions";
     return fetch(`${this.baseUrl}/${e}`, {
@@ -128,7 +117,7 @@ class P extends _ {
         {
           query: i,
           streaming: !1,
-          maxResults: 30
+          maxResults: e.maxResults || 30
         },
         "search",
         r
@@ -145,6 +134,7 @@ class P extends _ {
             id: l.id,
             title: S(l.item.metadata?.title),
             description: l.item.metadata?.description ? S(l.item.metadata?.description) : "",
+            timestamp: l.item.timestamp ?? void 0,
             url: l.item.key,
             image: l.item.metadata?.image || void 0,
             metadata: l.item.metadata
@@ -176,8 +166,8 @@ class P extends _ {
       const { done: u, value: C } = await l.read();
       if (u)
         break;
-      const B = b.decode(C, { stream: !0 });
-      c += B;
+      const R = b.decode(C, { stream: !0 });
+      c += R;
     }
     yield {
       type: "result",
@@ -245,10 +235,10 @@ class P extends _ {
     return `req-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
   }
 }
-const V = `<svg width="32" height="10" viewBox="0 0 412 186" xmlns="http://www.w3.org/2000/svg" aria-label="Cloudflare" role="img">
+const P = `<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 ${V}</a>`, $ = `
+</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 = `
 /* Chat container */
 .chat-container {
   display: flex;
@@ -565,7 +555,7 @@ const V = `<svg width="32" height="10" viewBox="0 0 412 186" xmlns="http://www.w
 .chat-message-bubble a:hover {
   text-decoration: none;
 }
-`, x = `
+`, y = `
 :host {
   /* Colors - Light Mode */
   --search-snippet-primary-color: #2563eb;
@@ -1000,7 +990,7 @@ const V = `<svg width="32" height="10" viewBox="0 0 412 186" xmlns="http://www.w
   text-align: center;
 }
 `;
-function D(o) {
+function j(o) {
   let i = o;
   i = O(i), i = i.replace(/```([\s\S]*?)```/g, (n, c) => `<pre><code>${c.trim()}</code></pre>`);
   const e = i.split(`
@@ -1137,13 +1127,13 @@ class q {
    */
   async sendMessage(i) {
     const e = {
-      id: E("msg"),
+      id: M("msg"),
       role: "user",
       content: i,
       timestamp: Date.now()
     };
     this.addMessage(e), this.renderMessages(!0), this.setStreamingState(!0);
-    const t = E("msg"), s = {
+    const t = M("msg"), s = {
       id: t,
       role: "assistant",
       content: "",
@@ -1161,10 +1151,10 @@ class q {
           break;
         }
       const c = this.messages.findIndex((l) => l.id === t);
-      c !== -1 && (this.messages[c].content = n), this.container.dispatchEvent(g("message", { message: s }));
+      c !== -1 && (this.messages[c].content = n), this.container.dispatchEvent(m("message", { message: s }));
     } catch (r) {
       this.showErrorInMessage(t, r.message), this.container.dispatchEvent(
-        g("error", {
+        m("error", {
           error: {
             message: r.message,
             code: "CHAT_ERROR"
@@ -1229,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">${D(i.content)}</div>` : ""}
+            ${i.content ? `<div class="chat-message-text">${j(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">${N(i.timestamp)}</span>
+            <span class="chat-message-time">${D(i.timestamp)}</span>
           </div>
         </div>
       </div>
@@ -1286,7 +1276,7 @@ class q {
     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 M = "chat-bubble-snippet";
+const E = "chat-bubble-snippet";
 class K extends HTMLElement {
   constructor() {
     super();
@@ -1307,7 +1297,7 @@ class K extends HTMLElement {
     return ["api-url", "placeholder", "theme", "hide-branding"];
   }
   connectedCallback() {
-    this.render(), this.initializeClient(), this.dispatchEvent(g("ready", void 0));
+    this.render(), this.initializeClient(), this.dispatchEvent(m("ready", void 0));
   }
   disconnectedCallback() {
     this.cleanup();
@@ -1320,7 +1310,7 @@ class K extends HTMLElement {
       apiUrl: d(this.getAttribute("api-url"), "http://localhost:3000"),
       placeholder: d(this.getAttribute("placeholder"), "Type a message..."),
       theme: d(this.getAttribute("theme"), "auto"),
-      hideBranding: m(this.getAttribute("hide-branding"), !1)
+      hideBranding: g(this.getAttribute("hide-branding"), !1)
     };
   }
   initializeClient() {
@@ -1337,8 +1327,8 @@ class K extends HTMLElement {
   }
   render() {
     const e = document.createElement("style");
-    e.textContent = `${x}
-${$}
+    e.textContent = `${y}
+${B}
 ${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() {
@@ -1518,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">${y}</div>`}
+        ${this.getProps().hideBranding ? "" : `<div class="powered-by">${x}</div>`}
       </div>
     `;
   }
@@ -1569,7 +1559,7 @@ ${this.getBubbleStyles()}`, this.container = document.createElement("div"), this
     return this.chatView?.getMessages() || [];
   }
 }
-customElements.get(M) || customElements.define(M, K);
+customElements.get(E) || customElements.define(E, K);
 const L = "chat-page-snippet", I = "chat-page-sessions";
 class U extends HTMLElement {
   constructor() {
@@ -1593,7 +1583,7 @@ class U extends HTMLElement {
     return ["api-url", "placeholder", "theme", "hide-branding"];
   }
   connectedCallback() {
-    this.render(), this.initializeClient(), this.setupView(), this.dispatchEvent(g("ready", void 0));
+    this.render(), this.initializeClient(), this.setupView(), this.dispatchEvent(m("ready", void 0));
   }
   disconnectedCallback() {
     this.saveCurrentSession(), this.cleanup();
@@ -1606,7 +1596,7 @@ class U extends HTMLElement {
       apiUrl: d(this.getAttribute("api-url"), "http://localhost:3000"),
       placeholder: d(this.getAttribute("placeholder"), "Type a message..."),
       theme: d(this.getAttribute("theme"), "auto"),
-      hideBranding: m(this.getAttribute("hide-branding"), !1)
+      hideBranding: g(this.getAttribute("hide-branding"), !1)
     };
   }
   initializeClient() {
@@ -1623,8 +1613,8 @@ class U extends HTMLElement {
   }
   render() {
     const e = document.createElement("style");
-    e.textContent = `${x}
-${$}
+    e.textContent = `${y}
+${B}
 ${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() {
@@ -1916,7 +1906,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">${y}</div>`}
+        ${this.getProps().hideBranding ? "" : `<div class="powered-by">${x}</div>`}
       </div>
       <div class="chat-main">
         <div class="chat-page-header">
@@ -2349,12 +2339,36 @@ a.search-result-item:focus-visible {
   overflow: hidden;
 }
 
+.search-result-metadata {
+  display: flex;
+  align-items: center;
+  gap: var(--search-snippet-spacing-sm);
+  margin-top: var(--search-snippet-spacing-xs);
+  min-width: 0;
+}
+
 .search-result-url {
   font-size: var(--search-snippet-font-size-sm);
   color: var(--search-snippet-primary-color);
-  margin-top: var(--search-snippet-spacing-xs);
   text-decoration: none;
-  display: inline-block;
+  display: block;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.search-result-url-empty {
+  visibility: hidden;
+}
+
+.search-result-date {
+  font-size: 12px;
+  font-weight: var(--search-snippet-font-weight-medium);
+  color: var(--search-snippet-text-secondary);
+  text-align: right;
+  flex-shrink: 0;
 }
 
 .search-result-url:hover {
@@ -2479,12 +2493,13 @@ class F extends HTMLElement {
       "theme",
       "hide-branding",
       "show-url",
+      "show-date",
       "hide-thumbnails",
       "see-more"
     ];
   }
   connectedCallback() {
-    this.initializeClient(), this.render(), this.dispatchEvent(g("ready", void 0));
+    this.initializeClient(), this.render(), this.dispatchEvent(m("ready", void 0));
   }
   disconnectedCallback() {
     this.cleanup();
@@ -2499,9 +2514,10 @@ class F extends HTMLElement {
       maxResults: f(this.getAttribute("max-results"), 10),
       debounceMs: f(this.getAttribute("debounce-ms"), 300),
       theme: d(this.getAttribute("theme"), "auto"),
-      hideBranding: m(this.getAttribute("hide-branding"), !1),
-      showUrl: m(this.getAttribute("show-url"), !1),
-      hideThumbnails: m(this.getAttribute("hide-thumbnails"), !1),
+      hideBranding: g(this.getAttribute("hide-branding"), !1),
+      showUrl: g(this.getAttribute("show-url"), !1),
+      showDate: g(this.getAttribute("show-date"), !1),
+      hideThumbnails: g(this.getAttribute("hide-thumbnails"), !1),
       seeMore: d(this.getAttribute("see-more"), "")
     };
   }
@@ -2519,12 +2535,12 @@ class F extends HTMLElement {
   }
   render() {
     const e = this.getProps(), t = (r) => this.performSearch(r);
-    this.debouncedSearch = A(
+    this.debouncedSearch = $(
       t,
       e.debounceMs || 400
     );
     const s = document.createElement("style");
-    s.textContent = `${x}
+    s.textContent = `${y}
 ${G}`, this.container = document.createElement("div"), this.container.className = "container", this.container.innerHTML = `
             <div class="search-view"> 
                 <div class="search-input-wrapper">
@@ -2589,7 +2605,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">${y}</div>`, n = s.seeMore ? `<div class="search-footer">
+    const s = this.getProps(), r = s.hideBranding ? "" : `<div class="powered-by-inline">${x}</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>
@@ -2609,14 +2625,17 @@ ${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);
+    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">
+            ${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>` : "";
     return `
-            <a href="${e.url ? h(e.url) : "#"}" class="search-result-item" data-result-id="${h(e.url || "")}">
+            <a href="${r}" class="search-result-item" data-result-id="${h(e.url || "")}">
                 ${s}
                 <div class="search-result-content">
                     <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>` : ""}
+                    ${c}
                 </div>
             </a>
         `;
@@ -2978,17 +2997,37 @@ a.modal-result-item:focus-visible {
   overflow: hidden;
 }
 
+.modal-result-metadata {
+  display: flex;
+  align-items: center;
+  gap: var(--search-snippet-spacing-sm);
+  min-width: 0;
+}
+
 .modal-result-url {
   font-size: var(--search-snippet-font-size-sm);
   color: var(--search-snippet-primary-color);
   text-decoration: none;
-  display: inline-block;
-  max-width: 100%;
+  display: block;
+  flex: 1;
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.modal-result-url-empty {
+  visibility: hidden;
+}
+
+.modal-result-date {
+  font-size: 12px;
+  font-weight: var(--search-snippet-font-weight-medium);
+  color: var(--search-snippet-text-secondary);
+  text-align: right;
+  flex-shrink: 0;
+}
+
 .modal-result-url:hover {
   text-decoration: underline;
 }
@@ -3182,12 +3221,13 @@ class W extends HTMLElement {
       "debounce-ms",
       "hide-branding",
       "show-url",
+      "show-date",
       "hide-thumbnails",
       "see-more"
     ];
   }
   connectedCallback() {
-    this.initializeClient(), this.render(), this.attachGlobalKeyboardShortcut(), this.dispatchEvent(g("ready", void 0));
+    this.initializeClient(), this.render(), this.attachGlobalKeyboardShortcut(), this.dispatchEvent(m("ready", void 0));
   }
   disconnectedCallback() {
     this.cleanup();
@@ -3204,9 +3244,10 @@ class W extends HTMLElement {
       theme: d(this.getAttribute("theme"), "auto"),
       shortcut: d(this.getAttribute("shortcut"), "k"),
       useMetaKey: this.getAttribute("use-meta-key") !== "false",
-      hideBranding: m(this.getAttribute("hide-branding"), !1),
-      showUrl: m(this.getAttribute("show-url"), !1),
-      hideThumbnails: m(this.getAttribute("hide-thumbnails"), !1),
+      hideBranding: g(this.getAttribute("hide-branding"), !1),
+      showUrl: g(this.getAttribute("show-url"), !1),
+      showDate: g(this.getAttribute("show-date"), !1),
+      hideThumbnails: g(this.getAttribute("hide-thumbnails"), !1),
       seeMore: d(this.getAttribute("see-more"), "")
     };
   }
@@ -3224,14 +3265,14 @@ class W extends HTMLElement {
   }
   render() {
     const e = this.getProps(), t = (c) => this.performSearch(c);
-    this.debouncedSearch = A(
+    this.debouncedSearch = $(
       t,
       e.debounceMs || 300
     );
     const s = document.createElement("style");
-    s.textContent = `${x}
+    s.textContent = `${y}
 ${Y}`;
-    const r = e.hideBranding ? "" : `<div class="powered-by-inline">${y}</div>`, n = document.createElement("div");
+    const r = e.hideBranding ? "" : `<div class="powered-by-inline">${x}</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">
@@ -3325,7 +3366,7 @@ ${Y}`;
     }
     const e = this.results[this.activeIndex];
     this.dispatchEvent(
-      g("result-select", {
+      m("result-select", {
         result: e,
         index: this.activeIndex
       })
@@ -3366,10 +3407,13 @@ ${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);
+    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">
+            ${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>` : "";
     return `
       <a 
-        href="${e.url ? h(e.url) : "#"}"
+        href="${n}"
         class="modal-result-item${t === this.activeIndex ? " active" : ""}" 
         role="option" 
         id="result-${t}"
@@ -3382,7 +3426,7 @@ ${Y}`;
         <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>` : ""}
-          ${s.showUrl && e.url ? `<span class="modal-result-url">${h(e.url)}</span>` : ""}
+          ${l}
         </div>
       </a>
     `;
@@ -3509,13 +3553,13 @@ ${Y}`;
       requestAnimationFrame(() => {
         this.inputElement?.focus();
       });
-    }), this.lockBodyScroll(), this.dispatchEvent(g("open", void 0)));
+    }), this.lockBodyScroll(), this.dispatchEvent(m("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(g("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(m("close", void 0)));
   }
   /**
    * Toggle the search modal open/closed
@@ -3544,7 +3588,7 @@ ${Y}`;
 }
 customElements.get(T) || customElements.define(T, W);
 export {
-  P as AISearchClient,
+  _ as AISearchClient,
   K as ChatBubbleSnippet,
   U as ChatPageSnippet,
   F as SearchBarSnippet,