@cloudflare/ai-search-snippet 0.0.25 → 0.0.26

package/dist/main.d.ts

@@ -206,7 +206,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"];
+    static get observedAttributes(): readonly ["api-url", "placeholder", "max-results", "debounce-ms", "theme", "hide-branding", "show-url", "hide-thumbnails", "see-more"];
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -262,7 +262,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"];
+    static get observedAttributes(): readonly ["api-url", "placeholder", "max-results", "theme", "shortcut", "use-meta-key", "debounce-ms", "hide-branding", "show-url", "hide-thumbnails", "see-more"];
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -358,6 +358,10 @@ export declare interface SearchSnippetProps {
     hideBranding?: boolean;
     /** Show URL in search results (default: false) */
     showUrl?: 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=" */
+    seeMore?: string;
 }
 
 /**

package/dist/search-snippet.es.js

@@ -1,7 +1,7 @@
 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 = [
+const p = [
   "Searching...",
   "Digging through results...",
   "Scanning the knowledge base...",
@@ -51,7 +51,7 @@ function N(o) {
 function E(o = "id") {
   return `${o}-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
 }
-function p(o, i) {
+function d(o, i) {
   return o !== null ? o : i;
 }
 function m(o, i) {
@@ -143,10 +143,10 @@ class P extends _ {
           (l) => ({
             type: "result",
             id: l.id,
-            title: S(l.item.metadata.title),
-            description: l.item.metadata.description ? S(l.item.metadata.description) : "",
+            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,
+            image: l.item.metadata?.image || void 0,
             metadata: l.item.metadata
           })
         );
@@ -248,7 +248,7 @@ class P extends _ {
 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>`, D = "https://search.ai.cloudflare.com", y = `Powered by <a href="${D}" target="_blank" rel="noopener noreferrer">Cloudflare AI Search ${V}</a>`, $ = `
+</svg>`, j = "https://search.ai.cloudflare.com", y = `Powered by <a href="${j}" target="_blank" rel="noopener noreferrer">Cloudflare AI Search ${V}</a>`, $ = `
 /* Chat container */
 .chat-container {
   display: flex;
@@ -1000,9 +1000,9 @@ const V = `<svg width="32" height="10" viewBox="0 0 412 186" xmlns="http://www.w
   text-align: center;
 }
 `;
-function O(o) {
+function D(o) {
   let i = o;
-  i = j(i), i = i.replace(/```([\s\S]*?)```/g, (n, c) => `<pre><code>${c.trim()}</code></pre>`);
+  i = O(i), i = i.replace(/```([\s\S]*?)```/g, (n, c) => `<pre><code>${c.trim()}</code></pre>`);
   const e = i.split(`
 `), t = [];
   let s = !1, r = "";
@@ -1048,7 +1048,7 @@ function v(o) {
     '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>'
   ), i;
 }
-function j(o) {
+function O(o) {
   const i = {
     "&": "&amp;",
     "<": "&lt;",
@@ -1229,8 +1229,8 @@ 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">${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>` : ""}
+            ${i.content ? `<div class="chat-message-text">${D(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>
@@ -1254,8 +1254,8 @@ class q {
     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);
+    this.loadingMessageIndex = Math.floor(Math.random() * p.length), this.loadingMessageInterval = setInterval(() => {
+      this.loadingMessageIndex = (this.loadingMessageIndex + 1) % p.length, this.isStreaming && this.renderMessages(!0);
     }, 2500);
   }
   clearLoadingMessages() {
@@ -1317,9 +1317,9 @@ class K extends HTMLElement {
   }
   getProps() {
     return {
-      apiUrl: p(this.getAttribute("api-url"), "http://localhost:3000"),
-      placeholder: p(this.getAttribute("placeholder"), "Type a message..."),
-      theme: p(this.getAttribute("theme"), "auto"),
+      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)
     };
   }
@@ -1603,9 +1603,9 @@ class U extends HTMLElement {
   }
   getProps() {
     return {
-      apiUrl: p(this.getAttribute("api-url"), "http://localhost:3000"),
-      placeholder: p(this.getAttribute("placeholder"), "Type a message..."),
-      theme: p(this.getAttribute("theme"), "auto"),
+      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)
     };
   }
@@ -2260,15 +2260,13 @@ a.search-result-item {
   height: 64px;
   border-radius: calc(var(--search-snippet-border-radius) - 4px);
   overflow: hidden;
-  background: var(--search-snippet-surface);
-  border: var(--search-snippet-border-width) solid var(--search-snippet-border-color);
   position: relative;
 }
 
 .search-result-image {
   width: 100%;
   height: 100%;
-  object-fit: cover;
+  object-fit: contain;
   opacity: 0;
   transition: opacity var(--search-snippet-transition);
 }
@@ -2381,13 +2379,29 @@ a.search-result-item:focus-visible {
 /* Search footer */
 .search-footer {
   padding: var(--search-snippet-spacing-md);
-  border-top: var(--search-snippet-border-width) solid var(--search-snippet-border-color);
+  padding-bottom: var(--search-snippet-spacing-xs);
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--search-snippet-spacing-sm);
 }
 
+/* See more link */
+.search-see-more {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--search-snippet-spacing-xs);
+  font-size: var(--search-snippet-font-size-sm);
+  color: var(--search-snippet-primary-color);
+  text-decoration: none;
+  font-weight: var(--search-snippet-font-weight-medium);
+  transition: color var(--search-snippet-transition-fast);
+}
+
+.search-see-more:hover {
+  text-decoration: underline;
+}
+
 /* Loading state for search */
 .search-loading {
   display: flex;
@@ -2464,7 +2478,9 @@ class F extends HTMLElement {
       "debounce-ms",
       "theme",
       "hide-branding",
-      "show-url"
+      "show-url",
+      "hide-thumbnails",
+      "see-more"
     ];
   }
   connectedCallback() {
@@ -2478,13 +2494,15 @@ class F extends HTMLElement {
   }
   getProps() {
     return {
-      apiUrl: p(this.getAttribute("api-url"), "http://localhost:3000"),
-      placeholder: p(this.getAttribute("placeholder"), "Search..."),
+      apiUrl: d(this.getAttribute("api-url"), "http://localhost:3000"),
+      placeholder: d(this.getAttribute("placeholder"), "Search..."),
       maxResults: f(this.getAttribute("max-results"), 10),
       debounceMs: f(this.getAttribute("debounce-ms"), 300),
-      theme: p(this.getAttribute("theme"), "auto"),
+      theme: d(this.getAttribute("theme"), "auto"),
       hideBranding: m(this.getAttribute("hide-branding"), !1),
-      showUrl: m(this.getAttribute("show-url"), !1)
+      showUrl: m(this.getAttribute("show-url"), !1),
+      hideThumbnails: m(this.getAttribute("hide-thumbnails"), !1),
+      seeMore: d(this.getAttribute("see-more"), "")
     };
   }
   initializeClient() {
@@ -2571,7 +2589,12 @@ ${G}`, this.container = document.createElement("div"), this.container.className
       this.showNoResultsState(t);
       return;
     }
-    const r = this.getProps().hideBranding ? "" : `<div class="powered-by-inline">${y}</div>`, n = `
+    const s = this.getProps(), r = s.hideBranding ? "" : `<div class="powered-by-inline">${y}</div>`, n = s.seeMore ? `<div class="search-footer">
+            <a href="${h(s.seeMore + encodeURIComponent(t))}" class="search-see-more">
+              <span>See more results</span>
+              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
+            </a>
+          </div>` : "", c = `
             <div class="search-header">
                 <div class="search-count">
                     Found ${e.length} result${e.length === 1 ? "" : "s"}
@@ -2579,13 +2602,14 @@ ${G}`, this.container = document.createElement("div"), this.container.className
                 ${r}
             </div>
             <div class="search-results">
-                ${e.map((c) => this.renderResult(c)).join("")}
+                ${e.map((l) => this.renderResult(l)).join("")}
             </div>
+            ${n}
         `;
-    this.resultsContainer.innerHTML = n, this.attachResultHandlers();
+    this.resultsContainer.innerHTML = c, this.attachResultHandlers();
   }
   renderResult(e) {
-    const t = this.getProps(), s = this.renderResultImage(e.image, e.title);
+    const t = this.getProps(), s = t.hideThumbnails ? "" : this.renderResultImage(e.image, e.title);
     return `
             <a href="${e.url ? h(e.url) : "#"}" class="search-result-item" data-result-id="${h(e.url || "")}">
                 ${s}
@@ -2637,18 +2661,18 @@ ${G}`, this.container = document.createElement("div"), this.container.className
     });
   }
   showLoadingState() {
-    this.resultsContainer && (this.clearLoadingInterval(), this.loadingMessageIndex = Math.floor(Math.random() * d.length), this.resultsContainer.innerHTML = `
+    this.resultsContainer && (this.clearLoadingInterval(), this.loadingMessageIndex = Math.floor(Math.random() * p.length), this.resultsContainer.innerHTML = `
             <div class="search-loading">
                 <div class="loading" aria-label="Loading"></div>
-                <div class="loading-text loading-text-animate">${d[this.loadingMessageIndex]}</div>
+                <div class="loading-text loading-text-animate">${p[this.loadingMessageIndex]}</div>
             </div>
         `, this.startLoadingInterval());
   }
   startLoadingInterval() {
     this.loadingMessageInterval = setInterval(() => {
-      this.loadingMessageIndex = (this.loadingMessageIndex + 1) % d.length;
+      this.loadingMessageIndex = (this.loadingMessageIndex + 1) % p.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"));
+      e && (e.classList.remove("loading-text-animate"), e.offsetWidth, e.textContent = p[this.loadingMessageIndex], e.classList.add("loading-text-animate"));
     }, 2500);
   }
   clearLoadingInterval() {
@@ -2859,15 +2883,13 @@ a.modal-result-item {
   height: 48px;
   border-radius: 6px;
   overflow: hidden;
-  background: var(--search-snippet-surface);
-  border: var(--search-snippet-border-width) solid var(--search-snippet-border-color);
   position: relative;
 }
 
 .modal-result-image {
   width: 100%;
   height: 100%;
-  object-fit: cover;
+  object-fit: contain;
   opacity: 0;
   transition: opacity var(--search-snippet-transition);
 }
@@ -3073,6 +3095,26 @@ a.modal-result-item:focus-visible {
   color: var(--search-snippet-primary-color);
 }
 
+/* See more link */
+.modal-see-more {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--search-snippet-spacing-xs);
+  padding: var(--search-snippet-spacing-md);
+  font-size: var(--search-snippet-font-size-sm);
+  color: var(--search-snippet-primary-color);
+  text-decoration: none;
+  font-weight: var(--search-snippet-font-weight-medium);
+  transition: background var(--search-snippet-transition-fast);
+  padding-bottom: var(--search-snippet-spacing-xs);
+}
+
+.modal-see-more:hover {
+  background: var(--search-snippet-hover);
+  text-decoration: underline;
+}
+
 /* Responsive adjustments */
 @media (max-width: 640px) {
   .modal-container {
@@ -3139,7 +3181,9 @@ class W extends HTMLElement {
       "use-meta-key",
       "debounce-ms",
       "hide-branding",
-      "show-url"
+      "show-url",
+      "hide-thumbnails",
+      "see-more"
     ];
   }
   connectedCallback() {
@@ -3153,15 +3197,17 @@ class W extends HTMLElement {
   }
   getProps() {
     return {
-      apiUrl: p(this.getAttribute("api-url"), "http://localhost:3000"),
-      placeholder: p(this.getAttribute("placeholder"), "Search..."),
+      apiUrl: d(this.getAttribute("api-url"), "http://localhost:3000"),
+      placeholder: d(this.getAttribute("placeholder"), "Search..."),
       maxResults: f(this.getAttribute("max-results"), 10),
       debounceMs: f(this.getAttribute("debounce-ms"), 300),
-      theme: p(this.getAttribute("theme"), "auto"),
-      shortcut: p(this.getAttribute("shortcut"), "k"),
+      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)
+      showUrl: m(this.getAttribute("show-url"), !1),
+      hideThumbnails: m(this.getAttribute("hide-thumbnails"), !1),
+      seeMore: d(this.getAttribute("see-more"), "")
     };
   }
   initializeClient() {
@@ -3313,11 +3359,14 @@ ${Y}`;
       this.showNoResultsState(t);
       return;
     }
-    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();
+    const s = this.getProps(), r = e.map((c, l) => this.renderResult(c, l)).join(""), n = s.seeMore ? `<a href="${h(s.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 = 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 = this.renderResultImage(e.image, e.title);
+    const s = this.getProps(), r = s.hideThumbnails ? "" : this.renderResultImage(e.image, e.title);
     return `
       <a 
         href="${e.url ? h(e.url) : "#"}"
@@ -3394,18 +3443,18 @@ ${Y}`;
     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() * d.length), this.resultsContainer.innerHTML = `
+    this.resultsContainer && (this.clearLoadingInterval(), this.loadingMessageIndex = Math.floor(Math.random() * p.length), this.resultsContainer.innerHTML = `
       <div class="modal-loading">
         <div class="loading" aria-label="Loading"></div>
-        <div class="loading-text loading-text-animate">${d[this.loadingMessageIndex]}</div>
+        <div class="loading-text loading-text-animate">${p[this.loadingMessageIndex]}</div>
       </div>
-    `, this.footerCount && (this.footerCount.textContent = d[this.loadingMessageIndex]), this.startLoadingInterval());
+    `, this.footerCount && (this.footerCount.textContent = p[this.loadingMessageIndex]), this.startLoadingInterval());
   }
   startLoadingInterval() {
     this.loadingMessageInterval = setInterval(() => {
-      this.loadingMessageIndex = (this.loadingMessageIndex + 1) % d.length;
+      this.loadingMessageIndex = (this.loadingMessageIndex + 1) % p.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]);
+      e && (e.classList.remove("loading-text-animate"), e.offsetWidth, e.textContent = p[this.loadingMessageIndex], e.classList.add("loading-text-animate")), this.footerCount && (this.footerCount.textContent = p[this.loadingMessageIndex]);
     }, 2500);
   }
   clearLoadingInterval() {