@cloudflare/ai-search-snippet 0.0.17 → 0.0.21

package/README.md

@@ -97,10 +97,11 @@ These attributes are available on all components:
 
 Additional attributes for `<search-bar-snippet>` and `<search-modal-snippet>`:
 
-| Attribute     | Type   | Default | Description                          |
-| ------------- | ------ | ------- | ------------------------------------ |
-| `max-results` | number | `10`    | Maximum search results to display    |
-| `debounce-ms` | number | `300`   | Input debounce delay in milliseconds |
+| Attribute     | Type    | Default | Description                          |
+| ------------- | ------- | ------- | ------------------------------------ |
+| `max-results` | number  | `10`    | Maximum search results to display    |
+| `debounce-ms` | number  | `300`   | Input debounce delay in milliseconds |
+| `show-url`    | boolean | `false` | Show URL in search results           |
 
 ### Modal-Specific Attributes
 

package/dist/main.d.ts

@@ -198,14 +198,13 @@ declare class SearchBarSnippet extends HTMLElement {
     private inputElement;
     private resultsContainer;
     private searchButton;
-    private isLoading;
-    private currentQuery;
     private debouncedSearch;
+    private currentSearchController;
     private handleInputChange;
     private handleInputKeydownEnter;
     private handleInputKeydownEscape;
     private handleSearchButtonClick;
-    static get observedAttributes(): readonly ["api-url", "placeholder", "max-results", "debounce-ms", "theme", "hide-branding"];
+    static get observedAttributes(): readonly ["api-url", "placeholder", "max-results", "debounce-ms", "theme", "hide-branding", "show-url"];
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -247,17 +246,17 @@ export declare class SearchModalSnippet extends HTMLElement {
     private resultsContainer;
     private footerCount;
     private isOpen;
-    private isLoading;
     private results;
     private activeIndex;
     private debouncedSearch;
+    private currentSearchController;
     private handleGlobalKeydown;
     private handleInputChange;
     private handleInputKeydown;
     private handleBackdropClick;
     private savedBodyStyles;
     private savedHtmlOverflow;
-    static get observedAttributes(): readonly ["api-url", "placeholder", "max-results", "theme", "shortcut", "use-meta-key", "debounce-ms", "hide-branding"];
+    static get observedAttributes(): readonly ["api-url", "placeholder", "max-results", "theme", "shortcut", "use-meta-key", "debounce-ms", "hide-branding", "show-url"];
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -349,6 +348,8 @@ export declare interface SearchSnippetProps {
     theme?: Theme;
     /** Hide the "Powered by Cloudflare AI Search" branding */
     hideBranding?: boolean;
+    /** Show URL in search results (default: false) */
+    showUrl?: boolean;
 }
 
 /**

package/dist/search-snippet.es.js

@@ -42,10 +42,10 @@ function S(o = "id") {
 function u(o, i) {
   return o !== null ? o : i;
 }
-function f(o, i) {
+function v(o, i) {
   return o === null ? i : o === "true" || o === "";
 }
-function b(o, i) {
+function f(o, i) {
   if (o === null) return i;
   const e = Number.parseInt(o, 10);
   return Number.isNaN(e) ? i : e;
@@ -132,7 +132,7 @@ class P extends N {
             type: "result",
             id: d.id,
             title: C(d.item.metadata.title),
-            description: C(d.item.metadata.description),
+            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
@@ -556,6 +556,7 @@ const $ = `
   --search-snippet-surface: #f8f9fa;
   --search-snippet-text-color: #212529;
   --search-snippet-text-secondary: #6c757d;
+  --search-snippet-text-description: #495057;
   --search-snippet-border-color: #dee2e6;
   --search-snippet-hover-background: #f1f3f5;
   --search-snippet-focus-ring: #0066cc40;
@@ -667,6 +668,7 @@ const $ = `
   --search-snippet-surface: #f8f9fa;
   --search-snippet-text-color: #212529;
   --search-snippet-text-secondary: #6c757d;
+  --search-snippet-text-description: #495057;
   --search-snippet-border-color: #dee2e6;
   --search-snippet-hover-background: #f1f3f5;
   --search-snippet-focus-ring: #0066cc40;
@@ -695,6 +697,7 @@ const $ = `
     --search-snippet-surface: #25262b;
     --search-snippet-text-color: #c1c2c5;
     --search-snippet-text-secondary: #909296;
+    --search-snippet-text-description: #adb5bd;
     --search-snippet-border-color: #373a40;
     --search-snippet-hover-background: #2c2e33;
     --search-snippet-focus-ring: #4dabf740;
@@ -971,7 +974,7 @@ function V(o) {
     const c = e[n], h = c.match(/^(#{1,6})\s+(.+)$/);
     if (h) {
       const p = h[1].length, k = h[2];
-      t.push(`<h${p}>${v(k)}</h${p}>`);
+      t.push(`<h${p}>${b(k)}</h${p}>`);
       continue;
     }
     if (c.match(/^---+$/)) {
@@ -980,29 +983,29 @@ function V(o) {
     }
     if (c.match(/^>\s+/)) {
       const p = c.replace(/^>\s+/, "");
-      t.push(`<blockquote>${v(p)}</blockquote>`);
+      t.push(`<blockquote>${b(p)}</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>${v(d[1])}</li>`);
+      (!s || a !== "ul") && (s && t.push(`</${a}>`), t.push("<ul>"), s = !0, a = "ul"), t.push(`<li>${b(d[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>${v(g[1])}</li>`);
+      (!s || a !== "ol") && (s && t.push(`</${a}>`), t.push("<ol>"), s = !0, a = "ol"), t.push(`<li>${b(g[1])}</li>`);
       continue;
     }
     if (s && (t.push(`</${a}>`), s = !1, a = ""), c.trim() === "") {
       t.push("<br />");
       continue;
     }
-    t.push(`<p>${v(c)}</p>`);
+    t.push(`<p>${b(c)}</p>`);
   }
   return s && t.push(`</${a}>`), t.join(`
 `);
 }
-function v(o) {
+function b(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,
@@ -1271,7 +1274,7 @@ class O extends HTMLElement {
       apiUrl: u(this.getAttribute("api-url"), "http://localhost:3000"),
       placeholder: u(this.getAttribute("placeholder"), "Type a message..."),
       theme: u(this.getAttribute("theme"), "auto"),
-      hideBranding: f(this.getAttribute("hide-branding"), !1)
+      hideBranding: v(this.getAttribute("hide-branding"), !1)
     };
   }
   initializeClient() {
@@ -1557,7 +1560,7 @@ class D extends HTMLElement {
       apiUrl: u(this.getAttribute("api-url"), "http://localhost:3000"),
       placeholder: u(this.getAttribute("placeholder"), "Type a message..."),
       theme: u(this.getAttribute("theme"), "auto"),
-      hideBranding: f(this.getAttribute("hide-branding"), !1)
+      hideBranding: v(this.getAttribute("hide-branding"), !1)
     };
   }
   initializeClient() {
@@ -2189,7 +2192,7 @@ const U = `
   gap: var(--search-snippet-spacing-sm);
 }
 
-.search-result-item {
+a.search-result-item {
   display: flex;
   flex-direction: row;
   align-items: flex-start;
@@ -2200,6 +2203,8 @@ const U = `
   border-radius: var(--search-snippet-border-radius);
   cursor: pointer;
   transition: var(--search-snippet-transition);
+  text-decoration: none;
+  color: inherit;
 }
 
 /* Image thumbnail container */
@@ -2267,14 +2272,14 @@ const U = `
   min-width: 0;
 }
 
-.search-result-item:hover {
+a.search-result-item:hover {
   background: var(--search-snippet-hover-background);
   border-color: var(--search-snippet-primary-color);
   transform: translateY(-1px);
   box-shadow: var(--search-snippet-result-item-shadow);
 }
 
-.search-result-item:focus-visible {
+a.search-result-item:focus-visible {
   outline: 2px solid var(--search-snippet-primary-color);
   outline-offset: 2px;
 }
@@ -2292,7 +2297,7 @@ const U = `
 
 .search-result-snippet {
   font-size: var(--search-snippet-font-size-sm);
-  color: var(--search-snippet-text-secondary);
+  color: var(--search-snippet-text-description);
   line-height: 1.6;
   display: -webkit-box;
   -webkit-line-clamp: 3;
@@ -2394,9 +2399,8 @@ class F extends HTMLElement {
     r(this, "inputElement", null);
     r(this, "resultsContainer", null);
     r(this, "searchButton", null);
-    r(this, "isLoading", !1);
-    r(this, "currentQuery", "");
     r(this, "debouncedSearch", null);
+    r(this, "currentSearchController", null);
     // Event handler references for cleanup
     r(this, "handleInputChange", null);
     r(this, "handleInputKeydownEnter", null);
@@ -2411,7 +2415,8 @@ class F extends HTMLElement {
       "max-results",
       "debounce-ms",
       "theme",
-      "hide-branding"
+      "hide-branding",
+      "show-url"
     ];
   }
   connectedCallback() {
@@ -2427,10 +2432,11 @@ class F extends HTMLElement {
     return {
       apiUrl: u(this.getAttribute("api-url"), "http://localhost:3000"),
       placeholder: u(this.getAttribute("placeholder"), "Search..."),
-      maxResults: b(this.getAttribute("max-results"), 10),
-      debounceMs: b(this.getAttribute("debounce-ms"), 300),
+      maxResults: f(this.getAttribute("max-results"), 10),
+      debounceMs: f(this.getAttribute("debounce-ms"), 300),
       theme: u(this.getAttribute("theme"), "auto"),
-      hideBranding: f(this.getAttribute("hide-branding"), !1)
+      hideBranding: v(this.getAttribute("hide-branding"), !1),
+      showUrl: v(this.getAttribute("show-url"), !1)
     };
   }
   initializeClient() {
@@ -2494,15 +2500,20 @@ ${U}`, this.container = document.createElement("div"), this.container.className
     }, this.searchButton.addEventListener("click", this.handleSearchButtonClick)));
   }
   async performSearch(e) {
-    if (!(this.isLoading || e === this.currentQuery || !this.client)) {
-      this.currentQuery = e, this.isLoading = !0, this.showLoadingState();
+    if (this.client) {
+      this.currentSearchController && (this.currentSearchController.abort(), this.currentSearchController = null), this.currentSearchController = new AbortController(), this.showLoadingState();
       try {
-        const t = await this.client.search(e, { streaming: !1 });
+        const t = await this.client.search(e, {
+          streaming: !1,
+          signal: this.currentSearchController.signal
+        });
         this.displayResults(t, e);
       } catch (t) {
+        if (t.name === "AbortError")
+          return;
         this.showErrorState(t.message);
       } finally {
-        this.isLoading = !1;
+        this.currentSearchController = null;
       }
     }
   }
@@ -2526,16 +2537,16 @@ ${U}`, this.container = document.createElement("div"), this.container.className
     this.resultsContainer.innerHTML = n, this.attachResultHandlers();
   }
   renderResult(e) {
-    const t = this.renderResultImage(e.image, e.title);
+    const t = this.getProps(), s = this.renderResultImage(e.image, e.title);
     return `
-            <div class="search-result-item" role="button" tabindex="0" data-result-id="${l(e.url || "")}">
-                ${t}
+            <a href="${e.url ? l(e.url) : "#"}" class="search-result-item" data-result-id="${l(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>
-                    ${e.url ? `<a href="${l(e.url)}" class="search-result-url">${l(e.url)}</a>` : ""}
+                    ${t.showUrl && e.url ? `<span class="search-result-url">${l(e.url)}</span>` : ""}
                 </div>
-            </div>
+            </a>
         `;
   }
   renderResultImage(e, t) {
@@ -2561,11 +2572,8 @@ ${U}`, this.container = document.createElement("div"), this.container.className
     const e = this.container?.querySelectorAll(".search-result-item");
     if (!e) return;
     for (const s of e)
-      s.addEventListener("click", () => {
-        const a = s.getAttribute("data-result-id");
-        console.log("Result clicked:", a);
-      }), s.addEventListener("keydown", (a) => {
-        (a.key === "Enter" || a.key === " ") && s.click();
+      s.getAttribute("href") === "#" && s.addEventListener("click", (n) => {
+        n.preventDefault();
       });
     this.container?.querySelectorAll(".search-result-image")?.forEach((s) => {
       s.addEventListener("load", () => {
@@ -2628,7 +2636,7 @@ ${U}`, this.container = document.createElement("div"), this.container.className
     t === "auto" ? this.removeAttribute("theme") : this.setAttribute("theme", t);
   }
   cleanup() {
-    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.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) {
@@ -2771,7 +2779,7 @@ const G = `
   gap: var(--search-snippet-spacing-xs);
 }
 
-.modal-result-item {
+a.modal-result-item {
   padding: var(--search-snippet-spacing-md);
   background: transparent;
   border: var(--search-snippet-border-width) solid transparent;
@@ -2782,6 +2790,8 @@ const G = `
   flex-direction: row;
   align-items: flex-start;
   gap: var(--search-snippet-spacing-md);
+  text-decoration: none;
+  color: inherit;
 }
 
 /* Image thumbnail container */
@@ -2852,18 +2862,18 @@ const G = `
   gap: var(--search-snippet-spacing-xs);
 }
 
-.modal-result-item:hover,
-.modal-result-item.active {
+a.modal-result-item:hover,
+a.modal-result-item.active {
   background: var(--search-snippet-hover-background);
   border-color: var(--search-snippet-border-color);
 }
 
-.modal-result-item.active {
+a.modal-result-item.active {
   border-color: var(--search-snippet-primary-color);
   background: var(--search-snippet-focus-ring);
 }
 
-.modal-result-item:focus-visible {
+a.modal-result-item:focus-visible {
   outline: 2px solid var(--search-snippet-primary-color);
   outline-offset: -2px;
 }
@@ -2880,7 +2890,7 @@ const G = `
 
 .modal-result-description {
   font-size: var(--search-snippet-font-size-sm);
-  color: var(--search-snippet-text-secondary);
+  color: var(--search-snippet-text-description);
   line-height: 1.5;
   display: -webkit-box;
   -webkit-line-clamp: 2;
@@ -3045,10 +3055,10 @@ class Y extends HTMLElement {
     r(this, "resultsContainer", null);
     r(this, "footerCount", null);
     r(this, "isOpen", !1);
-    r(this, "isLoading", !1);
     r(this, "results", []);
     r(this, "activeIndex", -1);
     r(this, "debouncedSearch", null);
+    r(this, "currentSearchController", null);
     // Event handler references for cleanup
     r(this, "handleGlobalKeydown", null);
     r(this, "handleInputChange", null);
@@ -3068,7 +3078,8 @@ class Y extends HTMLElement {
       "shortcut",
       "use-meta-key",
       "debounce-ms",
-      "hide-branding"
+      "hide-branding",
+      "show-url"
     ];
   }
   connectedCallback() {
@@ -3084,12 +3095,13 @@ class Y extends HTMLElement {
     return {
       apiUrl: u(this.getAttribute("api-url"), "http://localhost:3000"),
       placeholder: u(this.getAttribute("placeholder"), "Search..."),
-      maxResults: b(this.getAttribute("max-results"), 10),
-      debounceMs: b(this.getAttribute("debounce-ms"), 300),
+      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"),
       useMetaKey: this.getAttribute("use-meta-key") !== "false",
-      hideBranding: f(this.getAttribute("hide-branding"), !1)
+      hideBranding: v(this.getAttribute("hide-branding"), !1),
+      showUrl: v(this.getAttribute("show-url"), !1)
     };
   }
   initializeClient() {
@@ -3201,8 +3213,8 @@ ${G}`;
   }
   selectActiveResult() {
     if (this.activeIndex < 0 || this.activeIndex >= this.results.length) {
-      const t = this.inputElement?.value.trim();
-      t && t.length > 0 && this.performSearch(t);
+      const s = this.inputElement?.value.trim();
+      s && s.length > 0 && this.performSearch(s);
       return;
     }
     const e = this.results[this.activeIndex];
@@ -3211,18 +3223,27 @@ ${G}`;
         result: e,
         index: this.activeIndex
       })
-    ), e.url && (window.location.href = e.url), this.close();
+    );
+    const t = this.resultsContainer?.querySelector(
+      `.modal-result-item[data-index="${this.activeIndex}"]`
+    );
+    t && e.url && t.click(), this.close();
   }
   async performSearch(e) {
-    if (!(this.isLoading || !this.client)) {
-      this.isLoading = !0, this.showLoadingState();
+    if (this.client) {
+      this.currentSearchController && (this.currentSearchController.abort(), this.currentSearchController = null), this.currentSearchController = new AbortController(), this.showLoadingState();
       try {
-        const t = await this.client.search(e, { streaming: !1 }), s = this.getProps();
+        const t = await this.client.search(e, {
+          streaming: !1,
+          signal: this.currentSearchController.signal
+        }), s = this.getProps();
         this.results = t.slice(0, s.maxResults || 10), this.activeIndex = this.results.length > 0 ? 0 : -1, this.displayResults(this.results, e);
       } catch (t) {
+        if (t.name === "AbortError")
+          return;
         this.showErrorState(t.message);
       } finally {
-        this.isLoading = !1;
+        this.currentSearchController = null;
       }
     }
   }
@@ -3236,9 +3257,10 @@ ${G}`;
     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.renderResultImage(e.image, e.title);
+    const s = this.getProps(), a = this.renderResultImage(e.image, e.title);
     return `
-      <div 
+      <a 
+        href="${e.url ? l(e.url) : "#"}"
         class="modal-result-item${t === this.activeIndex ? " active" : ""}" 
         role="option" 
         id="result-${t}"
@@ -3247,13 +3269,13 @@ ${G}`;
         data-index="${t}"
         data-url="${l(e.url || "")}"
       >
-        ${s}
+        ${a}
         <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>` : ""}
-          ${e.url ? `<a href="${l(e.url)}" class="modal-result-url" tabindex="-1">${l(e.url)}</a>` : ""}
+          ${s.showUrl && e.url ? `<span class="modal-result-url">${l(e.url)}</span>` : ""}
         </div>
-      </div>
+      </a>
     `;
   }
   renderResultImage(e, t) {
@@ -3279,8 +3301,8 @@ ${G}`;
     const e = this.resultsContainer?.querySelectorAll(".modal-result-item");
     if (!e) return;
     e.forEach((s, a) => {
-      s.addEventListener("click", (n) => {
-        n.target.classList.contains("modal-result-url") || (this.activeIndex = a, this.selectActiveResult());
+      s.getAttribute("href") === "#" && s.addEventListener("click", (c) => {
+        c.preventDefault();
       }), s.addEventListener("mouseenter", () => {
         this.activeIndex = a, this.updateActiveResult();
       });
@@ -3357,7 +3379,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.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.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
   /**