@cloudflare/ai-search-snippet 0.0.28 → 0.0.29
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/main.d.ts
CHANGED
|
@@ -318,6 +318,7 @@ export declare interface SearchOptions {
|
|
|
318
318
|
query?: string;
|
|
319
319
|
streaming?: boolean;
|
|
320
320
|
signal?: AbortSignal;
|
|
321
|
+
/** Maximum search results to request from the API */
|
|
321
322
|
maxResults?: number;
|
|
322
323
|
}
|
|
323
324
|
|
|
@@ -343,7 +344,7 @@ export declare interface SearchSnippetProps {
|
|
|
343
344
|
apiUrl: string;
|
|
344
345
|
/** Input placeholder text */
|
|
345
346
|
placeholder?: string;
|
|
346
|
-
/** Maximum search results to display
|
|
347
|
+
/** Maximum search results to display */
|
|
347
348
|
maxResults?: number;
|
|
348
349
|
/** Input debounce delay in milliseconds (search-bar only) */
|
|
349
350
|
debounceMs?: number;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
var H = Object.defineProperty;
|
|
2
2
|
var N = (o, i, e) => i in o ? H(o, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[i] = e;
|
|
3
3
|
var a = (o, i, e) => N(o, typeof i != "symbol" ? i + "" : i, e);
|
|
4
|
-
const
|
|
4
|
+
const u = [
|
|
5
5
|
"Searching...",
|
|
6
6
|
"Digging through results...",
|
|
7
7
|
"Scanning the knowledge base...",
|
|
@@ -54,7 +54,7 @@ function $(o) {
|
|
|
54
54
|
day: "numeric"
|
|
55
55
|
});
|
|
56
56
|
}
|
|
57
|
-
function
|
|
57
|
+
function E(o = "id") {
|
|
58
58
|
return `${o}-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
|
|
59
59
|
}
|
|
60
60
|
function d(o, i) {
|
|
@@ -63,7 +63,7 @@ function d(o, i) {
|
|
|
63
63
|
function g(o, i) {
|
|
64
64
|
return o === null ? i : o === "true" || o === "";
|
|
65
65
|
}
|
|
66
|
-
function
|
|
66
|
+
function w(o, i) {
|
|
67
67
|
if (o === null) return i;
|
|
68
68
|
const e = Number.parseInt(o, 10);
|
|
69
69
|
return Number.isNaN(e) ? i : e;
|
|
@@ -76,12 +76,12 @@ function m(o, i) {
|
|
|
76
76
|
cancelable: !0
|
|
77
77
|
});
|
|
78
78
|
}
|
|
79
|
-
function
|
|
79
|
+
function x(o) {
|
|
80
80
|
if (!o)
|
|
81
81
|
throw new Error("API URL is required");
|
|
82
|
-
return new
|
|
82
|
+
return new _(o);
|
|
83
83
|
}
|
|
84
|
-
class
|
|
84
|
+
class _ {
|
|
85
85
|
constructor(i) {
|
|
86
86
|
a(this, "activeRequests", /* @__PURE__ */ new Map());
|
|
87
87
|
a(this, "baseUrl");
|
|
@@ -128,7 +128,7 @@ class D {
|
|
|
128
128
|
throw new Error("Response body is empty");
|
|
129
129
|
const c = await n.json();
|
|
130
130
|
if (c.success && c.result)
|
|
131
|
-
return c.result.chunks.
|
|
131
|
+
return c.result.chunks.map(
|
|
132
132
|
(l) => ({
|
|
133
133
|
type: "result",
|
|
134
134
|
id: l.id,
|
|
@@ -161,12 +161,12 @@ class D {
|
|
|
161
161
|
if (!n.body)
|
|
162
162
|
throw new Error("Response body is empty");
|
|
163
163
|
let c = "";
|
|
164
|
-
const l = n.body.getReader(),
|
|
164
|
+
const l = n.body.getReader(), v = new TextDecoder();
|
|
165
165
|
for (; ; ) {
|
|
166
|
-
const { done:
|
|
167
|
-
if (
|
|
166
|
+
const { done: p, value: C } = await l.read();
|
|
167
|
+
if (p)
|
|
168
168
|
break;
|
|
169
|
-
const R =
|
|
169
|
+
const R = v.decode(C, { stream: !0 });
|
|
170
170
|
c += R;
|
|
171
171
|
}
|
|
172
172
|
yield {
|
|
@@ -175,7 +175,7 @@ class D {
|
|
|
175
175
|
title: "",
|
|
176
176
|
description: c.replaceAll("data: ", "").trim().split(`
|
|
177
177
|
|
|
178
|
-
`).map((
|
|
178
|
+
`).map((p) => JSON.parse(p)).map((p) => p.response).join(""),
|
|
179
179
|
url: "",
|
|
180
180
|
metadata: {}
|
|
181
181
|
};
|
|
@@ -235,10 +235,10 @@ class D {
|
|
|
235
235
|
return `req-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
|
|
236
236
|
}
|
|
237
237
|
}
|
|
238
|
-
const
|
|
238
|
+
const D = `<svg width="32" height="10" viewBox="0 0 412 186" xmlns="http://www.w3.org/2000/svg" aria-label="Cloudflare" role="img">
|
|
239
239
|
<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"/>
|
|
240
240
|
<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"/>
|
|
241
|
-
</svg>`, U = "https://workers.cloudflare.com/product/ai-search", y = `Powered by <a href="${U}" target="_blank" rel="noopener noreferrer">Cloudflare AI Search ${
|
|
241
|
+
</svg>`, U = "https://workers.cloudflare.com/product/ai-search", y = `Powered by <a href="${U}" target="_blank" rel="noopener noreferrer">Cloudflare AI Search ${D}</a>`, q = `
|
|
242
242
|
/* Chat container */
|
|
243
243
|
.chat-container {
|
|
244
244
|
display: flex;
|
|
@@ -555,7 +555,7 @@ const _ = `<svg width="32" height="10" viewBox="0 0 412 186" xmlns="http://www.w
|
|
|
555
555
|
.chat-message-bubble a:hover {
|
|
556
556
|
text-decoration: none;
|
|
557
557
|
}
|
|
558
|
-
`,
|
|
558
|
+
`, k = `
|
|
559
559
|
:host {
|
|
560
560
|
/* Colors - Light Mode */
|
|
561
561
|
--search-snippet-primary-color: #2563eb;
|
|
@@ -999,8 +999,8 @@ function V(o) {
|
|
|
999
999
|
for (let n = 0; n < e.length; n++) {
|
|
1000
1000
|
const c = e[n], l = c.match(/^(#{1,6})\s+(.+)$/);
|
|
1001
1001
|
if (l) {
|
|
1002
|
-
const
|
|
1003
|
-
t.push(`<h${
|
|
1002
|
+
const p = l[1].length, C = l[2];
|
|
1003
|
+
t.push(`<h${p}>${f(C)}</h${p}>`);
|
|
1004
1004
|
continue;
|
|
1005
1005
|
}
|
|
1006
1006
|
if (c.match(/^---+$/)) {
|
|
@@ -1008,30 +1008,30 @@ function V(o) {
|
|
|
1008
1008
|
continue;
|
|
1009
1009
|
}
|
|
1010
1010
|
if (c.match(/^>\s+/)) {
|
|
1011
|
-
const
|
|
1012
|
-
t.push(`<blockquote>${
|
|
1011
|
+
const p = c.replace(/^>\s+/, "");
|
|
1012
|
+
t.push(`<blockquote>${f(p)}</blockquote>`);
|
|
1013
1013
|
continue;
|
|
1014
1014
|
}
|
|
1015
|
-
const
|
|
1016
|
-
if (
|
|
1017
|
-
(!s || r !== "ul") && (s && t.push(`</${r}>`), t.push("<ul>"), s = !0, r = "ul"), t.push(`<li>${v
|
|
1015
|
+
const v = c.match(/^[-*]\s+(.+)$/);
|
|
1016
|
+
if (v) {
|
|
1017
|
+
(!s || r !== "ul") && (s && t.push(`</${r}>`), t.push("<ul>"), s = !0, r = "ul"), t.push(`<li>${f(v[1])}</li>`);
|
|
1018
1018
|
continue;
|
|
1019
1019
|
}
|
|
1020
|
-
const
|
|
1021
|
-
if (
|
|
1022
|
-
(!s || r !== "ol") && (s && t.push(`</${r}>`), t.push("<ol>"), s = !0, r = "ol"), t.push(`<li>${
|
|
1020
|
+
const b = c.match(/^\d+\.\s+(.+)$/);
|
|
1021
|
+
if (b) {
|
|
1022
|
+
(!s || r !== "ol") && (s && t.push(`</${r}>`), t.push("<ol>"), s = !0, r = "ol"), t.push(`<li>${f(b[1])}</li>`);
|
|
1023
1023
|
continue;
|
|
1024
1024
|
}
|
|
1025
1025
|
if (s && (t.push(`</${r}>`), s = !1, r = ""), c.trim() === "") {
|
|
1026
1026
|
t.push("<br />");
|
|
1027
1027
|
continue;
|
|
1028
1028
|
}
|
|
1029
|
-
t.push(`<p>${
|
|
1029
|
+
t.push(`<p>${f(c)}</p>`);
|
|
1030
1030
|
}
|
|
1031
1031
|
return s && t.push(`</${r}>`), t.join(`
|
|
1032
1032
|
`);
|
|
1033
1033
|
}
|
|
1034
|
-
function
|
|
1034
|
+
function f(o) {
|
|
1035
1035
|
let i = o;
|
|
1036
1036
|
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(
|
|
1037
1037
|
/\[([^\]]+)\]\(([^)]+)\)/g,
|
|
@@ -1127,13 +1127,13 @@ class B {
|
|
|
1127
1127
|
*/
|
|
1128
1128
|
async sendMessage(i) {
|
|
1129
1129
|
const e = {
|
|
1130
|
-
id:
|
|
1130
|
+
id: E("msg"),
|
|
1131
1131
|
role: "user",
|
|
1132
1132
|
content: i,
|
|
1133
1133
|
timestamp: Date.now()
|
|
1134
1134
|
};
|
|
1135
1135
|
this.addMessage(e), this.renderMessages(!0), this.setStreamingState(!0);
|
|
1136
|
-
const t =
|
|
1136
|
+
const t = E("msg"), s = {
|
|
1137
1137
|
id: t,
|
|
1138
1138
|
role: "assistant",
|
|
1139
1139
|
content: "",
|
|
@@ -1220,7 +1220,7 @@ class B {
|
|
|
1220
1220
|
<div class="chat-message-content">
|
|
1221
1221
|
<div class="chat-message-bubble">
|
|
1222
1222
|
${i.content ? `<div class="chat-message-text">${V(i.content)}</div>` : ""}
|
|
1223
|
-
${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">${
|
|
1223
|
+
${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>` : ""}
|
|
1224
1224
|
</div>
|
|
1225
1225
|
<div class="chat-message-metadata">
|
|
1226
1226
|
<span class="chat-message-time">${P(i.timestamp)}</span>
|
|
@@ -1244,8 +1244,8 @@ class B {
|
|
|
1244
1244
|
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();
|
|
1245
1245
|
}
|
|
1246
1246
|
startLoadingMessages() {
|
|
1247
|
-
this.loadingMessageIndex = Math.floor(Math.random() *
|
|
1248
|
-
this.loadingMessageIndex = (this.loadingMessageIndex + 1) %
|
|
1247
|
+
this.loadingMessageIndex = Math.floor(Math.random() * u.length), this.loadingMessageInterval = setInterval(() => {
|
|
1248
|
+
this.loadingMessageIndex = (this.loadingMessageIndex + 1) % u.length, this.isStreaming && this.renderMessages(!0);
|
|
1249
1249
|
}, 2500);
|
|
1250
1250
|
}
|
|
1251
1251
|
clearLoadingMessages() {
|
|
@@ -1276,7 +1276,7 @@ class B {
|
|
|
1276
1276
|
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;
|
|
1277
1277
|
}
|
|
1278
1278
|
}
|
|
1279
|
-
const
|
|
1279
|
+
const M = "chat-bubble-snippet";
|
|
1280
1280
|
class O extends HTMLElement {
|
|
1281
1281
|
constructor() {
|
|
1282
1282
|
super();
|
|
@@ -1320,14 +1320,14 @@ class O extends HTMLElement {
|
|
|
1320
1320
|
return;
|
|
1321
1321
|
}
|
|
1322
1322
|
try {
|
|
1323
|
-
this.client =
|
|
1323
|
+
this.client = x(e.apiUrl);
|
|
1324
1324
|
} catch (t) {
|
|
1325
1325
|
console.error("ChatBubbleSnippet:", t);
|
|
1326
1326
|
}
|
|
1327
1327
|
}
|
|
1328
1328
|
render() {
|
|
1329
1329
|
const e = document.createElement("style");
|
|
1330
|
-
e.textContent = `${
|
|
1330
|
+
e.textContent = `${k}
|
|
1331
1331
|
${q}
|
|
1332
1332
|
${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();
|
|
1333
1333
|
}
|
|
@@ -1567,7 +1567,7 @@ ${this.getBubbleStyles()}`, this.container = document.createElement("div"), this
|
|
|
1567
1567
|
return this.chatView?.getMessages() || [];
|
|
1568
1568
|
}
|
|
1569
1569
|
}
|
|
1570
|
-
customElements.get(
|
|
1570
|
+
customElements.get(M) || customElements.define(M, O);
|
|
1571
1571
|
const L = "chat-page-snippet", I = "chat-page-sessions";
|
|
1572
1572
|
class K extends HTMLElement {
|
|
1573
1573
|
constructor() {
|
|
@@ -1614,14 +1614,14 @@ class K extends HTMLElement {
|
|
|
1614
1614
|
return;
|
|
1615
1615
|
}
|
|
1616
1616
|
try {
|
|
1617
|
-
this.client =
|
|
1617
|
+
this.client = x(e.apiUrl);
|
|
1618
1618
|
} catch (t) {
|
|
1619
1619
|
console.error("ChatPageSnippet:", t);
|
|
1620
1620
|
}
|
|
1621
1621
|
}
|
|
1622
1622
|
render() {
|
|
1623
1623
|
const e = document.createElement("style");
|
|
1624
|
-
e.textContent = `${
|
|
1624
|
+
e.textContent = `${k}
|
|
1625
1625
|
${q}
|
|
1626
1626
|
${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();
|
|
1627
1627
|
}
|
|
@@ -2478,8 +2478,8 @@ a.search-result-item:focus-visible {
|
|
|
2478
2478
|
border-radius: 2px;
|
|
2479
2479
|
font-weight: var(--search-snippet-font-weight-medium);
|
|
2480
2480
|
}
|
|
2481
|
-
`, z = "search-bar-snippet";
|
|
2482
|
-
class
|
|
2481
|
+
`, z = "search-bar-snippet", F = 10, Y = 100;
|
|
2482
|
+
class W extends HTMLElement {
|
|
2483
2483
|
constructor() {
|
|
2484
2484
|
super();
|
|
2485
2485
|
a(this, "shadow");
|
|
@@ -2526,8 +2526,8 @@ class F extends HTMLElement {
|
|
|
2526
2526
|
return {
|
|
2527
2527
|
apiUrl: d(this.getAttribute("api-url"), ""),
|
|
2528
2528
|
placeholder: d(this.getAttribute("placeholder"), "Search..."),
|
|
2529
|
-
maxResults:
|
|
2530
|
-
debounceMs:
|
|
2529
|
+
maxResults: w(this.getAttribute("max-results"), 10),
|
|
2530
|
+
debounceMs: w(this.getAttribute("debounce-ms"), 300),
|
|
2531
2531
|
theme: d(this.getAttribute("theme"), "auto"),
|
|
2532
2532
|
hideBranding: g(this.getAttribute("hide-branding"), !1),
|
|
2533
2533
|
showUrl: g(this.getAttribute("show-url"), !1),
|
|
@@ -2543,7 +2543,7 @@ class F extends HTMLElement {
|
|
|
2543
2543
|
return;
|
|
2544
2544
|
}
|
|
2545
2545
|
try {
|
|
2546
|
-
this.client =
|
|
2546
|
+
this.client = x(e.apiUrl);
|
|
2547
2547
|
} catch (t) {
|
|
2548
2548
|
console.error("SearchBarSnippet:", t);
|
|
2549
2549
|
}
|
|
@@ -2555,7 +2555,7 @@ class F extends HTMLElement {
|
|
|
2555
2555
|
e.debounceMs || 400
|
|
2556
2556
|
);
|
|
2557
2557
|
const s = document.createElement("style");
|
|
2558
|
-
s.textContent = `${
|
|
2558
|
+
s.textContent = `${k}
|
|
2559
2559
|
${G}`, this.container = document.createElement("div"), this.container.className = "container", this.container.innerHTML = `
|
|
2560
2560
|
<div class="search-view">
|
|
2561
2561
|
<div class="search-input-wrapper">
|
|
@@ -2605,9 +2605,10 @@ ${G}`, this.container = document.createElement("div"), this.container.className
|
|
|
2605
2605
|
try {
|
|
2606
2606
|
const t = await this.client.search(e, {
|
|
2607
2607
|
streaming: !1,
|
|
2608
|
-
signal: this.currentSearchController.signal
|
|
2609
|
-
|
|
2610
|
-
this.
|
|
2608
|
+
signal: this.currentSearchController.signal,
|
|
2609
|
+
maxResults: Y
|
|
2610
|
+
}), s = this.getProps(), r = t.slice(0, s.maxResults || F);
|
|
2611
|
+
this.displayResults(r, e, t.length);
|
|
2611
2612
|
} catch (t) {
|
|
2612
2613
|
if (t.name === "AbortError")
|
|
2613
2614
|
return;
|
|
@@ -2616,30 +2617,30 @@ ${G}`, this.container = document.createElement("div"), this.container.className
|
|
|
2616
2617
|
this.currentSearchController = null;
|
|
2617
2618
|
}
|
|
2618
2619
|
}
|
|
2619
|
-
displayResults(e, t) {
|
|
2620
|
+
displayResults(e, t, s = e.length) {
|
|
2620
2621
|
if (this.clearLoadingInterval(), !this.resultsContainer) return;
|
|
2621
2622
|
if (e.length === 0) {
|
|
2622
2623
|
this.showNoResultsState(t);
|
|
2623
2624
|
return;
|
|
2624
2625
|
}
|
|
2625
|
-
const
|
|
2626
|
-
<a href="${h(
|
|
2626
|
+
const r = this.getProps(), n = r.hideBranding ? "" : `<div class="powered-by-inline">${y}</div>`, c = s > e.length, l = c ? `Showing ${e.length} of ${s} results` : `Found ${s} result${s === 1 ? "" : "s"}`, v = r.seeMore && c ? `<div class="search-footer">
|
|
2627
|
+
<a href="${h(r.seeMore + encodeURIComponent(t))}" class="search-see-more">
|
|
2627
2628
|
<span>See more results</span>
|
|
2628
2629
|
<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>
|
|
2629
2630
|
</a>
|
|
2630
|
-
</div>` : "",
|
|
2631
|
+
</div>` : "", b = `
|
|
2631
2632
|
<div class="search-header">
|
|
2632
2633
|
<div class="search-count">
|
|
2633
|
-
|
|
2634
|
+
${l}
|
|
2634
2635
|
</div>
|
|
2635
|
-
${
|
|
2636
|
+
${n}
|
|
2636
2637
|
</div>
|
|
2637
2638
|
<div class="search-results">
|
|
2638
|
-
${e.map((
|
|
2639
|
+
${e.map((p) => this.renderResult(p)).join("")}
|
|
2639
2640
|
</div>
|
|
2640
|
-
${
|
|
2641
|
+
${v}
|
|
2641
2642
|
`;
|
|
2642
|
-
this.resultsContainer.innerHTML =
|
|
2643
|
+
this.resultsContainer.innerHTML = b, this.attachResultHandlers();
|
|
2643
2644
|
}
|
|
2644
2645
|
renderResult(e) {
|
|
2645
2646
|
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($(e.timestamp))}</div>` : "", c = t.showUrl && e.url || n ? `<div class="search-result-metadata">
|
|
@@ -2697,18 +2698,18 @@ ${G}`, this.container = document.createElement("div"), this.container.className
|
|
|
2697
2698
|
});
|
|
2698
2699
|
}
|
|
2699
2700
|
showLoadingState() {
|
|
2700
|
-
this.resultsContainer && (this.clearLoadingInterval(), this.loadingMessageIndex = Math.floor(Math.random() *
|
|
2701
|
+
this.resultsContainer && (this.clearLoadingInterval(), this.loadingMessageIndex = Math.floor(Math.random() * u.length), this.resultsContainer.innerHTML = `
|
|
2701
2702
|
<div class="search-loading">
|
|
2702
2703
|
<div class="loading" aria-label="Loading"></div>
|
|
2703
|
-
<div class="loading-text loading-text-animate">${
|
|
2704
|
+
<div class="loading-text loading-text-animate">${u[this.loadingMessageIndex]}</div>
|
|
2704
2705
|
</div>
|
|
2705
2706
|
`, this.startLoadingInterval());
|
|
2706
2707
|
}
|
|
2707
2708
|
startLoadingInterval() {
|
|
2708
2709
|
this.loadingMessageInterval = setInterval(() => {
|
|
2709
|
-
this.loadingMessageIndex = (this.loadingMessageIndex + 1) %
|
|
2710
|
+
this.loadingMessageIndex = (this.loadingMessageIndex + 1) % u.length;
|
|
2710
2711
|
const e = this.resultsContainer?.querySelector(".loading-text");
|
|
2711
|
-
e && (e.classList.remove("loading-text-animate"), e.offsetWidth, e.textContent =
|
|
2712
|
+
e && (e.classList.remove("loading-text-animate"), e.offsetWidth, e.textContent = u[this.loadingMessageIndex], e.classList.add("loading-text-animate"));
|
|
2712
2713
|
}, 2500);
|
|
2713
2714
|
}
|
|
2714
2715
|
clearLoadingInterval() {
|
|
@@ -2764,8 +2765,8 @@ ${G}`, this.container = document.createElement("div"), this.container.className
|
|
|
2764
2765
|
await this.performSearch(e);
|
|
2765
2766
|
}
|
|
2766
2767
|
}
|
|
2767
|
-
customElements.get(z) || customElements.define(z,
|
|
2768
|
-
const
|
|
2768
|
+
customElements.get(z) || customElements.define(z, W);
|
|
2769
|
+
const X = `
|
|
2769
2770
|
/* Modal backdrop */
|
|
2770
2771
|
.modal-backdrop {
|
|
2771
2772
|
position: fixed;
|
|
@@ -3202,8 +3203,8 @@ a.modal-result-item:focus-visible {
|
|
|
3202
3203
|
.modal-container.open {
|
|
3203
3204
|
animation: modal-slide-in var(--search-snippet-transition) ease-out;
|
|
3204
3205
|
}
|
|
3205
|
-
`, T = "search-modal-snippet";
|
|
3206
|
-
class
|
|
3206
|
+
`, T = "search-modal-snippet", J = 10, Z = 100;
|
|
3207
|
+
class Q extends HTMLElement {
|
|
3207
3208
|
constructor() {
|
|
3208
3209
|
super();
|
|
3209
3210
|
a(this, "shadow");
|
|
@@ -3259,8 +3260,8 @@ class W extends HTMLElement {
|
|
|
3259
3260
|
return {
|
|
3260
3261
|
apiUrl: d(this.getAttribute("api-url"), ""),
|
|
3261
3262
|
placeholder: d(this.getAttribute("placeholder"), "Search..."),
|
|
3262
|
-
maxResults:
|
|
3263
|
-
debounceMs:
|
|
3263
|
+
maxResults: w(this.getAttribute("max-results"), 10),
|
|
3264
|
+
debounceMs: w(this.getAttribute("debounce-ms"), 300),
|
|
3264
3265
|
theme: d(this.getAttribute("theme"), "auto"),
|
|
3265
3266
|
shortcut: d(this.getAttribute("shortcut"), "k"),
|
|
3266
3267
|
useMetaKey: this.getAttribute("use-meta-key") !== "false",
|
|
@@ -3278,7 +3279,7 @@ class W extends HTMLElement {
|
|
|
3278
3279
|
return;
|
|
3279
3280
|
}
|
|
3280
3281
|
try {
|
|
3281
|
-
this.client =
|
|
3282
|
+
this.client = x(e.apiUrl);
|
|
3282
3283
|
} catch (t) {
|
|
3283
3284
|
console.error("SearchModalSnippet:", t);
|
|
3284
3285
|
}
|
|
@@ -3290,8 +3291,8 @@ class W extends HTMLElement {
|
|
|
3290
3291
|
e.debounceMs || 300
|
|
3291
3292
|
);
|
|
3292
3293
|
const s = document.createElement("style");
|
|
3293
|
-
s.textContent = `${
|
|
3294
|
-
${
|
|
3294
|
+
s.textContent = `${k}
|
|
3295
|
+
${X}`;
|
|
3295
3296
|
const r = e.hideBranding ? "" : `<div class="powered-by-inline">${y}</div>`, n = document.createElement("div");
|
|
3296
3297
|
n.innerHTML = `
|
|
3297
3298
|
<div class="modal-backdrop" role="presentation"></div>
|
|
@@ -3405,9 +3406,10 @@ ${Y}`;
|
|
|
3405
3406
|
try {
|
|
3406
3407
|
const t = await this.client.search(e, {
|
|
3407
3408
|
streaming: !1,
|
|
3408
|
-
signal: this.currentSearchController.signal
|
|
3409
|
+
signal: this.currentSearchController.signal,
|
|
3410
|
+
maxResults: Z
|
|
3409
3411
|
}), s = this.getProps();
|
|
3410
|
-
this.results = t.slice(0, s.maxResults ||
|
|
3412
|
+
this.results = t.slice(0, s.maxResults || J), this.activeIndex = this.results.length > 0 ? 0 : -1, this.displayResults(this.results, e, t.length);
|
|
3411
3413
|
} catch (t) {
|
|
3412
3414
|
if (t.name === "AbortError")
|
|
3413
3415
|
return;
|
|
@@ -3416,17 +3418,17 @@ ${Y}`;
|
|
|
3416
3418
|
this.currentSearchController = null;
|
|
3417
3419
|
}
|
|
3418
3420
|
}
|
|
3419
|
-
displayResults(e, t) {
|
|
3420
|
-
if (this.clearLoadingInterval(), !this.resultsContainer) return;
|
|
3421
|
+
displayResults(e, t, s = e.length) {
|
|
3422
|
+
if (console.log({ results: e, query: t, totalResults: s }), this.clearLoadingInterval(), !this.resultsContainer) return;
|
|
3421
3423
|
if (e.length === 0) {
|
|
3422
3424
|
this.showNoResultsState(t);
|
|
3423
3425
|
return;
|
|
3424
3426
|
}
|
|
3425
|
-
const
|
|
3427
|
+
const r = this.getProps(), n = 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"}`, v = r.seeMore && c ? `<a href="${h(r.seeMore + encodeURIComponent(t))}" class="modal-see-more">
|
|
3426
3428
|
<span>See more results</span>
|
|
3427
3429
|
<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>
|
|
3428
3430
|
</a>` : "";
|
|
3429
|
-
this.resultsContainer.innerHTML =
|
|
3431
|
+
this.resultsContainer.innerHTML = n + v, this.footerCount && (this.footerCount.textContent = l), this.inputElement && this.inputElement.setAttribute("aria-expanded", "true"), this.attachResultHandlers(), this.updateActiveResult();
|
|
3430
3432
|
}
|
|
3431
3433
|
renderResult(e, t) {
|
|
3432
3434
|
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($(e.timestamp))}</div>` : "", l = s.showUrl && e.url || c ? `<div class="modal-result-metadata">
|
|
@@ -3509,18 +3511,18 @@ ${Y}`;
|
|
|
3509
3511
|
this.clearLoadingInterval(), this.resultsContainer && (this.resultsContainer.innerHTML = this.renderEmptyState(), this.footerCount && (this.footerCount.textContent = ""), this.inputElement && this.inputElement.setAttribute("aria-expanded", "false"));
|
|
3510
3512
|
}
|
|
3511
3513
|
showLoadingState() {
|
|
3512
|
-
this.resultsContainer && (this.clearLoadingInterval(), this.loadingMessageIndex = Math.floor(Math.random() *
|
|
3514
|
+
this.resultsContainer && (this.clearLoadingInterval(), this.loadingMessageIndex = Math.floor(Math.random() * u.length), this.resultsContainer.innerHTML = `
|
|
3513
3515
|
<div class="modal-loading">
|
|
3514
3516
|
<div class="loading" aria-label="Loading"></div>
|
|
3515
|
-
<div class="loading-text loading-text-animate">${
|
|
3517
|
+
<div class="loading-text loading-text-animate">${u[this.loadingMessageIndex]}</div>
|
|
3516
3518
|
</div>
|
|
3517
|
-
`, this.footerCount && (this.footerCount.textContent =
|
|
3519
|
+
`, this.footerCount && (this.footerCount.textContent = u[this.loadingMessageIndex]), this.startLoadingInterval());
|
|
3518
3520
|
}
|
|
3519
3521
|
startLoadingInterval() {
|
|
3520
3522
|
this.loadingMessageInterval = setInterval(() => {
|
|
3521
|
-
this.loadingMessageIndex = (this.loadingMessageIndex + 1) %
|
|
3523
|
+
this.loadingMessageIndex = (this.loadingMessageIndex + 1) % u.length;
|
|
3522
3524
|
const e = this.resultsContainer?.querySelector(".loading-text");
|
|
3523
|
-
e && (e.classList.remove("loading-text-animate"), e.offsetWidth, e.textContent =
|
|
3525
|
+
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]);
|
|
3524
3526
|
}, 2500);
|
|
3525
3527
|
}
|
|
3526
3528
|
clearLoadingInterval() {
|
|
@@ -3611,13 +3613,13 @@ ${Y}`;
|
|
|
3611
3613
|
return this.isOpen;
|
|
3612
3614
|
}
|
|
3613
3615
|
}
|
|
3614
|
-
customElements.get(T) || customElements.define(T,
|
|
3616
|
+
customElements.get(T) || customElements.define(T, Q);
|
|
3615
3617
|
export {
|
|
3616
|
-
|
|
3618
|
+
_ as AISearchClient,
|
|
3617
3619
|
O as ChatBubbleSnippet,
|
|
3618
3620
|
K as ChatPageSnippet,
|
|
3619
|
-
|
|
3620
|
-
|
|
3621
|
-
|
|
3621
|
+
W as SearchBarSnippet,
|
|
3622
|
+
Q as SearchModalSnippet,
|
|
3623
|
+
W as default
|
|
3622
3624
|
};
|
|
3623
3625
|
//# sourceMappingURL=search-snippet.es.js.map
|