@cloudflare/ai-search-snippet 0.0.21 → 0.0.22

package/dist/search-snippet.es.js

@@ -87,15 +87,18 @@ class N {
 }
 class P extends N {
   request(i = {}, e, t) {
+    const s = e === "search" ? "snippet-search" : "snippet-chat-completions";
     return fetch(`${this.baseUrl}/${e}`, {
       method: "POST",
       body: JSON.stringify({
         messages: [{ role: "user", content: i.query }],
         stream: i.streaming,
-        max_results: i.maxResults
+        max_results: i.maxResults,
+        ...e === "search" && { retrieval_options: { metadata_only: !0 } }
       }),
       headers: {
-        "Content-Type": "application/json"
+        "Content-Type": "application/json",
+        "cf-ai-search-source": s
       },
       signal: t
     });
@@ -234,7 +237,10 @@ class P extends N {
     return `req-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
   }
 }
-const $ = `
+const _ = `<svg width="32" height="10" viewBox="0 0 412 186" xmlns="http://www.w3.org/2000/svg" aria-label="Cloudflare" role="img">
+  <path fill="#f38020" d="m280.8395,183.31456c11,-26 -4,-38 -19,-38l-148,-2c-4,0 -4,-6 1,-7l150,-2c17,-1 37,-15 43,-33c0,0 10,-21 9,-24a97,97 0 0 0 -187,-11c-38,-25 -78,9 -69,46c-48,3 -65,46 -60,72c0,1 1,2 3,2l274,0c1,0 3,-1 3,-3z"/>
+  <path fill="#faae40" d="m330.8395,81.31456c-4,0 -6,-1 -7,1l-5,21c-5,16 3,30 20,31l32,2c4,0 4,6 -1,7l-33,1c-36,4 -46,39 -46,39c0,2 0,3 2,3l113,0l3,-2a81,81 0 0 0 -78,-103"/>
+</svg>`, j = "https://search.ai.cloudflare.com", y = `Powered by <a href="${j}" target="_blank" rel="noopener noreferrer">Cloudflare AI Search ${_}</a>`, $ = `
 /* Chat container */
 .chat-container {
   display: flex;
@@ -547,7 +553,7 @@ const $ = `
 .chat-message-bubble a:hover {
   text-decoration: none;
 }
-`, y = `
+`, x = `
 :host {
   /* Colors - Light Mode */
   --search-snippet-primary-color: #2563eb;
@@ -960,13 +966,10 @@ const $ = `
   padding: var(--search-snippet-spacing-xs) 0;
   text-align: center;
 }
-`, j = `<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>`, K = "https://search.ai.cloudflare.com", x = `Powered by <a href="${K}" target="_blank" rel="noopener noreferrer">Cloudflare AI Search ${j}</a>`;
-function V(o) {
+`;
+function K(o) {
   let i = o;
-  i = _(i), i = i.replace(/```([\s\S]*?)```/g, (n, c) => `<pre><code>${c.trim()}</code></pre>`);
+  i = V(i), i = i.replace(/```([\s\S]*?)```/g, (n, c) => `<pre><code>${c.trim()}</code></pre>`);
   const e = i.split(`
 `), t = [];
   let s = !1, a = "";
@@ -1012,7 +1015,7 @@ function b(o) {
     '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>'
   ), i;
 }
-function _(o) {
+function V(o) {
   const i = {
     "&": "&amp;",
     "<": "&lt;",
@@ -1191,7 +1194,7 @@ 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">${V(i.content)}</div>` : ""}
+            ${i.content ? `<div class="chat-message-text">${K(i.content)}</div>` : ""}
             ${e ? '<div class="chat-streaming"><span class="chat-streaming-dot"></span><span class="chat-streaming-dot"></span><span class="chat-streaming-dot"></span></div>' : ""}
           </div>
           <div class="chat-message-metadata">
@@ -1291,7 +1294,7 @@ class O extends HTMLElement {
   }
   render() {
     const e = document.createElement("style");
-    e.textContent = `${y}
+    e.textContent = `${x}
 ${$}
 ${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();
   }
@@ -1472,7 +1475,7 @@ ${this.getBubbleStyles()}`, this.container = document.createElement("div"), this
           </div>
         </div>
         <div class="chat-content"></div>
-        ${this.getProps().hideBranding ? "" : `<div class="powered-by">${x}</div>`}
+        ${this.getProps().hideBranding ? "" : `<div class="powered-by">${y}</div>`}
       </div>
     `;
   }
@@ -1577,7 +1580,7 @@ class D extends HTMLElement {
   }
   render() {
     const e = document.createElement("style");
-    e.textContent = `${y}
+    e.textContent = `${x}
 ${$}
 ${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();
   }
@@ -1870,7 +1873,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">${x}</div>`}
+        ${this.getProps().hideBranding ? "" : `<div class="powered-by">${y}</div>`}
       </div>
       <div class="chat-main">
         <div class="chat-page-header">
@@ -2458,7 +2461,7 @@ class F extends HTMLElement {
       e.debounceMs || 400
     );
     const s = document.createElement("style");
-    s.textContent = `${y}
+    s.textContent = `${x}
 ${U}`, this.container = document.createElement("div"), this.container.className = "container", this.container.innerHTML = `
             <div class="search-view"> 
                 <div class="search-input-wrapper">
@@ -2523,7 +2526,7 @@ ${U}`, this.container = document.createElement("div"), this.container.className
       this.showNoResultsState(t);
       return;
     }
-    const a = this.getProps().hideBranding ? "" : `<div class="powered-by-inline">${x}</div>`, n = `
+    const a = this.getProps().hideBranding ? "" : `<div class="powered-by-inline">${y}</div>`, n = `
             <div class="search-header">
                 <div class="search-count">
                     Found ${e.length} result${e.length === 1 ? "" : "s"}
@@ -3123,9 +3126,9 @@ class Y extends HTMLElement {
       e.debounceMs || 300
     );
     const s = document.createElement("style");
-    s.textContent = `${y}
+    s.textContent = `${x}
 ${G}`;
-    const a = e.hideBranding ? "" : `<div class="powered-by-inline">${x}</div>`, n = document.createElement("div");
+    const a = e.hideBranding ? "" : `<div class="powered-by-inline">${y}</div>`, n = document.createElement("div");
     n.innerHTML = `
       <div class="modal-backdrop" role="presentation"></div>
       <div class="modal-container" role="dialog" aria-modal="true" aria-labelledby="modal-title">