@cloudflare/ai-search-snippet 0.0.37 → 0.0.38

package/dist/search-snippet.es.js

@@ -1,19 +1,113 @@
-var P = Object.defineProperty;
-var U = (n, i, e) => i in n ? P(n, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[i] = e;
-var a = (n, i, e) => U(n, typeof i != "symbol" ? i + "" : i, e);
-const g = [
-  "Searching...",
-  "Digging through results...",
-  "Scanning the knowledge base...",
-  "Finding the best matches...",
-  "Sifting through the data...",
-  "Almost there...",
-  "Looking far and wide...",
-  "Connecting the dots...",
-  "Rummaging through pages...",
-  "Hunting down answers..."
-];
-function $(n, i) {
+var G = Object.defineProperty;
+var Y = (n, i, e) => i in n ? G(n, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[i] = e;
+var a = (n, i, e) => Y(n, typeof i != "symbol" ? i + "" : i, e);
+const L = {
+  // Shared
+  loadingAriaLabel: "Loading",
+  errorPrefix: "Error:",
+  missingApiUrlError: "The api-url attribute is required. Please provide a valid API URL.",
+  poweredBy: "Powered by",
+  poweredByLinkLabel: "Cloudflare AI Search",
+  // Search (shared between bar and modal)
+  placeholder: "Search...",
+  searchButtonLabel: "Search",
+  searchInputAriaLabel: "Search input",
+  searchResultsAriaLabel: "Search results",
+  emptyStateTitle: "Start Searching",
+  emptyStateDescription: "Enter a query to search for results",
+  modalEmptyStateDescription: "Start typing to search",
+  noResultsTitle: "No Results Found",
+  noResultsDescription: 'No results found for "{query}"',
+  modalNoResultsTitle: "No results found",
+  modalNoResultsDescription: 'No results for "{query}"',
+  resultsCount: "Found {n} result",
+  resultsCountPlural: "Found {n} results",
+  resultsCountOverflow: "Showing {n} of {total} results",
+  modalResultsCount: "{n} result",
+  modalResultsCountPlural: "{n} results",
+  modalResultsCountZero: "0 results",
+  modalResultsCountError: "Error",
+  seeMoreResults: "See more results",
+  // Modal-only
+  navigateHint: "Navigate",
+  selectHint: "Select",
+  closeHint: "Close",
+  // Chat (shared between bubble, page, and chat view)
+  chatTitle: "Chat",
+  chatPlaceholder: "Type a message...",
+  chatInputAriaLabel: "Chat message input",
+  sendButtonLabel: "Send",
+  sendButtonAriaLabel: "Send message",
+  chatEmptyTitle: "Start a Conversation",
+  chatEmptyDescription: "Send a message to begin chatting",
+  userAvatar: "U",
+  assistantAvatar: "AI",
+  unknownError: "Unknown error",
+  // Chat bubble
+  openChatAriaLabel: "Open chat",
+  clearHistoryAriaLabel: "Clear history",
+  minimizeAriaLabel: "Minimize",
+  closeAriaLabel: "Close",
+  // Chat page
+  historyTitle: "History",
+  newChatButton: "New Chat",
+  clearChatButton: "Clear Chat",
+  toggleSidebarTitle: "Toggle sidebar",
+  deleteChatTitle: "Delete chat",
+  noChatsYet: "No chats yet",
+  yesterday: "Yesterday",
+  // Relative timestamps (formatTimestamp)
+  justNow: "Just now",
+  minuteAgo: "{n} minute ago",
+  minutesAgo: "{n} minutes ago",
+  hourAgo: "{n} hour ago",
+  hoursAgo: "{n} hours ago",
+  // Cycling loading messages
+  loadingMessages: [
+    "Searching...",
+    "Digging through results...",
+    "Scanning the knowledge base...",
+    "Finding the best matches...",
+    "Sifting through the data...",
+    "Almost there...",
+    "Looking far and wide...",
+    "Connecting the dots...",
+    "Rummaging through pages...",
+    "Hunting down answers..."
+  ]
+};
+function d(n) {
+  if (!n || typeof n != "object")
+    return L;
+  const i = { ...L };
+  for (const e of Object.keys(n)) {
+    const t = n[e];
+    if (t != null) {
+      if (e === "loadingMessages") {
+        Array.isArray(t) && t.length > 0 && (i.loadingMessages = t.filter((s) => typeof s == "string"), i.loadingMessages.length === 0 && (i.loadingMessages = L.loadingMessages));
+        continue;
+      }
+      typeof t == "string" && (i[e] = t);
+    }
+  }
+  return i;
+}
+function b(n, i = {}) {
+  return n.replace(/\{(\w+)\}/g, (e, t) => Object.hasOwn(i, t) ? String(i[t]) : e);
+}
+function k(n, i) {
+  if (!n) return null;
+  try {
+    const e = JSON.parse(n);
+    if (e === null || typeof e != "object" || Array.isArray(e))
+      throw new Error("translations must be a JSON object");
+    return e;
+  } catch (e) {
+    return console.error(`${i}: invalid translations attribute`, e), null;
+  }
+}
+const T = 2500;
+function P(n, i) {
   let e;
   function t(...s) {
     clearTimeout(e), e = setTimeout(() => {
@@ -22,49 +116,49 @@ function $(n, i) {
   }
   return t.cancel = () => clearTimeout(e), t;
 }
-function h(n) {
+function l(n) {
   const i = document.createElement("div");
   return i.textContent = n, i.innerHTML;
 }
-function q(n) {
+function U(n) {
   try {
     return decodeURI(n);
   } catch {
     return n;
   }
 }
-function E(n) {
+function A(n) {
   return new DOMParser().parseFromString(n, "text/html").documentElement.textContent || "";
 }
-function O(n) {
-  const i = new Date(n), t = (/* @__PURE__ */ new Date()).getTime() - i.getTime();
-  if (t < 6e4)
-    return "Just now";
-  if (t < 36e5) {
-    const s = Math.floor(t / 6e4);
-    return `${s} ${s === 1 ? "minute" : "minutes"} ago`;
+function J(n, i) {
+  const e = d(i), t = new Date(n), r = (/* @__PURE__ */ new Date()).getTime() - t.getTime();
+  if (r < 6e4)
+    return e.justNow;
+  if (r < 36e5) {
+    const o = Math.floor(r / 6e4), c = o === 1 ? e.minuteAgo : e.minutesAgo;
+    return b(c, { n: o });
   }
-  if (t < 864e5) {
-    const s = Math.floor(t / 36e5);
-    return `${s} ${s === 1 ? "hour" : "hours"} ago`;
+  if (r < 864e5) {
+    const o = Math.floor(r / 36e5), c = o === 1 ? e.hourAgo : e.hoursAgo;
+    return b(c, { n: o });
   }
-  return i.toLocaleString(void 0, {
+  return t.toLocaleString(void 0, {
     month: "short",
     day: "numeric",
     hour: "2-digit",
     minute: "2-digit"
   });
 }
-function B(n) {
+function j(n) {
   return new Date(n).toLocaleDateString(void 0, {
     month: "short",
     day: "numeric"
   });
 }
-function M(n = "id") {
+function I(n = "id") {
   return `${n}-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
 }
-function d(n, i) {
+function p(n, i) {
   return n !== null ? n : i;
 }
 function m(n, i) {
@@ -83,60 +177,60 @@ function v(n, i) {
     cancelable: !0
   });
 }
-function x(n) {
+function S(n) {
   if (!n)
     throw new Error("API URL is required");
-  return new K(n);
+  return new Q(n);
 }
-function w(n) {
+function C(n) {
   return n !== null && typeof n == "object" && !Array.isArray(n);
 }
-function R(...n) {
+function _(...n) {
   const i = {};
   for (const e of n)
     if (e)
       for (const [t, s] of Object.entries(e)) {
         const r = i[t];
-        w(r) && w(s) ? i[t] = R(r, s) : i[t] = s;
+        C(r) && C(s) ? i[t] = _(r, s) : i[t] = s;
       }
   return i;
 }
-function D(n, i) {
-  if (!w(i))
+function W(n, i) {
+  if (!C(i))
     return n;
   const e = new URLSearchParams();
-  for (const [l, p] of Object.entries(i))
-    p != null && e.append(l, String(p));
+  for (const [h, u] of Object.entries(i))
+    u != null && e.append(h, String(u));
   const t = e.toString();
   if (!t)
     return n;
   const s = n.indexOf("#"), r = s === -1 ? n : n.slice(0, s), o = s === -1 ? "" : n.slice(s), c = r.includes("?") ? "&" : "?";
   return `${r}${c}${t}${o}`;
 }
-function j(n) {
-  if (!w(n))
+function Z(n) {
+  if (!C(n))
     return {};
   const i = {};
   for (const [e, t] of Object.entries(n))
     t != null && (i[e] = String(t));
   return i;
 }
-function V(n) {
-  return w(n) ? n : void 0;
+function X(n) {
+  return C(n) ? n : void 0;
 }
-class K {
+class Q {
   constructor(i) {
     a(this, "activeRequests", /* @__PURE__ */ new Map());
     a(this, "baseUrl");
     this.baseUrl = i.replace(/\/$/, "");
   }
   request(i, e, t, s) {
-    const r = e === "search" ? "snippet-search" : "snippet-chat-completions", o = D(`${this.baseUrl}/${e}`, s?.queryParams);
+    const r = e === "search" ? "snippet-search" : "snippet-chat-completions", o = W(`${this.baseUrl}/${e}`, s?.queryParams);
     return fetch(o, {
       method: "POST",
-      body: JSON.stringify(R(V(s?.body), i)),
+      body: JSON.stringify(_(X(s?.body), i)),
       headers: {
-        ...j(s?.headers),
+        ...Z(s?.headers),
         "Content-Type": "application/json",
         Accept: i.stream ? "text/event-stream" : "application/json",
         "cf-ai-search-source": r
@@ -173,17 +267,17 @@ class K {
       const c = await o.json();
       if (c.success && c.result)
         return c.result.chunks.map(
-          (l) => ({
+          (h) => ({
             type: "result",
-            id: l.id,
-            title: E(l.item.metadata?.title),
-            description: l.item.metadata?.description ? E(l.item.metadata?.description) : "",
-            timestamp: l.item.timestamp ?? void 0,
-            url: l.item.key,
-            image: l.item.metadata?.image || void 0,
+            id: h.id,
+            title: A(h.item.metadata?.title),
+            description: h.item.metadata?.description ? A(h.item.metadata?.description) : "",
+            timestamp: h.item.timestamp ?? void 0,
+            url: h.item.key,
+            image: h.item.metadata?.image || void 0,
             metadata: {
-              ...l.item.metadata,
-              instance_id: l.instance_id
+              ...h.item.metadata,
+              instance_id: h.instance_id
             }
           })
         );
@@ -212,13 +306,13 @@ class K {
     if (!o.body)
       throw new Error("Response body is empty");
     let c = "";
-    const l = o.body.getReader(), p = new TextDecoder();
+    const h = o.body.getReader(), u = new TextDecoder();
     for (; ; ) {
-      const { done: u, value: S } = await l.read();
-      if (u)
+      const { done: g, value: w } = await h.read();
+      if (g)
         break;
-      const _ = p.decode(S, { stream: !0 });
-      c += _;
+      const F = u.decode(w, { stream: !0 });
+      c += F;
     }
     yield {
       type: "result",
@@ -226,7 +320,7 @@ class K {
       title: "",
       description: c.replaceAll("data: ", "").trim().split(`
 
-`).map((u) => JSON.parse(u)).map((u) => u.response).join(""),
+`).map((g) => JSON.parse(g)).map((g) => g.response).join(""),
       url: "",
       metadata: {}
     };
@@ -286,10 +380,10 @@ class K {
     return `req-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
   }
 }
-const G = `<svg width="32" height="10" viewBox="0 0 412 186" xmlns="http://www.w3.org/2000/svg" aria-label="Cloudflare" role="img">
+const ee = `<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>`, F = "https://workers.cloudflare.com/product/ai-search", k = `Powered by <a href="${F}" target="_blank" rel="noopener noreferrer">Cloudflare AI Search ${G}</a>`, H = `
+</svg>`, te = "https://workers.cloudflare.com/product/ai-search", E = `Powered by <a href="${te}" target="_blank" rel="noopener noreferrer">Cloudflare AI Search ${ee}</a>`, V = `
 /* Chat container */
 .chat-container {
   display: flex;
@@ -606,7 +700,7 @@ const G = `<svg width="32" height="10" viewBox="0 0 412 186" xmlns="http://www.w
 .chat-message-bubble a:hover {
   text-decoration: none;
 }
-`, C = `
+`, M = `
 :host {
   /* Colors - Light Mode */
   --search-snippet-primary-color: #2563eb;
@@ -1041,17 +1135,17 @@ const G = `<svg width="32" height="10" viewBox="0 0 412 186" xmlns="http://www.w
   text-align: center;
 }
 `;
-function Y(n) {
+function se(n) {
   let i = n;
-  i = J(i), i = i.replace(/```([\s\S]*?)```/g, (o, c) => `<pre><code>${c.trim()}</code></pre>`);
+  i = ie(i), i = i.replace(/```([\s\S]*?)```/g, (o, c) => `<pre><code>${c.trim()}</code></pre>`);
   const e = i.split(`
 `), t = [];
   let s = !1, r = "";
   for (let o = 0; o < e.length; o++) {
-    const c = e[o], l = c.match(/^(#{1,6})\s+(.+)$/);
-    if (l) {
-      const u = l[1].length, S = l[2];
-      t.push(`<h${u}>${f(S)}</h${u}>`);
+    const c = e[o], h = c.match(/^(#{1,6})\s+(.+)$/);
+    if (h) {
+      const g = h[1].length, w = h[2];
+      t.push(`<h${g}>${x(w)}</h${g}>`);
       continue;
     }
     if (c.match(/^---+$/)) {
@@ -1059,37 +1153,37 @@ function Y(n) {
       continue;
     }
     if (c.match(/^>\s+/)) {
-      const u = c.replace(/^>\s+/, "");
-      t.push(`<blockquote>${f(u)}</blockquote>`);
+      const g = c.replace(/^>\s+/, "");
+      t.push(`<blockquote>${x(g)}</blockquote>`);
       continue;
     }
-    const p = c.match(/^[-*]\s+(.+)$/);
-    if (p) {
-      (!s || r !== "ul") && (s && t.push(`</${r}>`), t.push("<ul>"), s = !0, r = "ul"), t.push(`<li>${f(p[1])}</li>`);
+    const u = c.match(/^[-*]\s+(.+)$/);
+    if (u) {
+      (!s || r !== "ul") && (s && t.push(`</${r}>`), t.push("<ul>"), s = !0, r = "ul"), t.push(`<li>${x(u[1])}</li>`);
       continue;
     }
-    const b = c.match(/^\d+\.\s+(.+)$/);
-    if (b) {
-      (!s || r !== "ol") && (s && t.push(`</${r}>`), t.push("<ol>"), s = !0, r = "ol"), t.push(`<li>${f(b[1])}</li>`);
+    const f = c.match(/^\d+\.\s+(.+)$/);
+    if (f) {
+      (!s || r !== "ol") && (s && t.push(`</${r}>`), t.push("<ol>"), s = !0, r = "ol"), t.push(`<li>${x(f[1])}</li>`);
       continue;
     }
     if (s && (t.push(`</${r}>`), s = !1, r = ""), c.trim() === "") {
       t.push("<br />");
       continue;
     }
-    t.push(`<p>${f(c)}</p>`);
+    t.push(`<p>${x(c)}</p>`);
   }
   return s && t.push(`</${r}>`), t.join(`
 `);
 }
-function f(n) {
+function x(n) {
   let i = n;
   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,
     '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>'
   ), i;
 }
-function J(n) {
+function ie(n) {
   const i = {
     "&": "&amp;",
     "<": "&lt;",
@@ -1099,11 +1193,12 @@ function J(n) {
   };
   return n.replace(/[&<>"']/g, (e) => i[e] || e);
 }
-class N {
+class K {
   constructor(i, e, t) {
     a(this, "container");
     a(this, "client");
     a(this, "props");
+    a(this, "translations");
     a(this, "inputElement", null);
     a(this, "messagesContainer", null);
     a(this, "sendButton", null);
@@ -1116,42 +1211,49 @@ class N {
     a(this, "handleInputResize", null);
     a(this, "handleInputKeydown", null);
     a(this, "handleSendClick", null);
-    this.container = i, this.client = e, this.props = t, this.render(), this.attachEventListeners();
+    this.container = i, this.client = e, this.props = t, this.translations = d(t.translations), this.render(), this.attachEventListeners();
   }
   /**
    * Render the chat interface
    */
   render() {
+    const i = this.translations;
     this.container.innerHTML = `
       <div class="chat-container">
         <div class="chat-messages">
-          <div class="chat-empty">
-            <svg class="chat-empty-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
-            </svg>
-            <div class="chat-empty-title">Start a Conversation</div>
-            <div class="chat-empty-description">
-              Send a message to begin chatting
-            </div>
-          </div>
+          ${this.renderEmptyStateHTML()}
         </div>
         <div class="chat-input-area">
           <div class="chat-input-wrapper">
             <textarea
               class="chat-input"
-              placeholder="${h(this.props.placeholder || "Type a message...")}"
-              aria-label="Chat message input"
+              placeholder="${l(this.props.placeholder || i.chatPlaceholder)}"
+              aria-label="${l(i.chatInputAriaLabel)}"
               style="height: 40px;"
               rows="1"
             ></textarea>
-            <button class="button chat-send-button" aria-label="Send message">
-              <span>Send</span>
+            <button class="button chat-send-button" aria-label="${l(i.sendButtonAriaLabel)}">
+              <span>${l(i.sendButtonLabel)}</span>
             </button>
           </div>
         </div>
       </div>
     `, this.messagesContainer = this.container.querySelector(".chat-messages"), this.inputElement = this.container.querySelector(".chat-input"), this.sendButton = this.container.querySelector(".chat-send-button");
   }
+  renderEmptyStateHTML() {
+    const i = this.translations;
+    return `
+      <div class="chat-empty">
+        <svg class="chat-empty-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+        </svg>
+        <div class="chat-empty-title">${l(i.chatEmptyTitle)}</div>
+        <div class="chat-empty-description">
+          ${l(i.chatEmptyDescription)}
+        </div>
+      </div>
+    `;
+  }
   /**
    * Attach event listeners
    */
@@ -1178,13 +1280,13 @@ class N {
    */
   async sendMessage(i) {
     const e = {
-      id: M("msg"),
+      id: I("msg"),
       role: "user",
       content: i,
       timestamp: Date.now()
     };
     this.addMessage(e), this.renderMessages(!0), this.setStreamingState(!0);
-    const t = M("msg"), s = {
+    const t = I("msg"), s = {
       id: t,
       role: "assistant",
       content: "",
@@ -1194,14 +1296,17 @@ class N {
     try {
       const r = this.client.chat(i);
       let o = "";
-      for await (const l of r)
-        if (l.type === "text" && l.message)
-          o += l.message, this.updateStreamingMessage(t, o);
-        else if (l.type === "error") {
-          this.showErrorInMessage(t, l.message || "Unknown error");
+      for await (const h of r)
+        if (h.type === "text" && h.message)
+          o += h.message, this.updateStreamingMessage(t, o);
+        else if (h.type === "error") {
+          this.showErrorInMessage(
+            t,
+            h.message || this.translations.unknownError
+          );
           break;
         }
-      const c = this.messages.findIndex((l) => l.id === t);
+      const c = this.messages.findIndex((h) => h.id === t);
       c !== -1 && (this.messages[c].content = o), this.container.dispatchEvent(v("message", { message: s }));
     } catch (r) {
       this.showErrorInMessage(t, r.message), this.container.dispatchEvent(
@@ -1234,7 +1339,7 @@ class N {
    */
   showErrorInMessage(i, e) {
     const t = this.messages.findIndex((s) => s.id === i);
-    t !== -1 && (this.messages[t].content = `Error: ${e}`, this.renderMessages());
+    t !== -1 && (this.messages[t].content = `${this.translations.errorPrefix} ${e}`, this.renderMessages());
   }
   /**
    * Render all messages
@@ -1242,17 +1347,7 @@ class N {
   renderMessages(i = !1) {
     if (!this.messagesContainer) return;
     if (this.messages.length === 0) {
-      this.messagesContainer.innerHTML = `
-        <div class="chat-empty">
-          <svg class="chat-empty-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
-          </svg>
-          <div class="chat-empty-title">Start a Conversation</div>
-          <div class="chat-empty-description">
-            Send a message to begin chatting
-          </div>
-        </div>
-      `;
+      this.messagesContainer.innerHTML = this.renderEmptyStateHTML();
       return;
     }
     const e = this.messages.map(
@@ -1264,17 +1359,17 @@ class N {
    * Render a single message
    */
   renderMessage(i, e = !1) {
-    const t = `chat-message-${i.role}`, s = i.role === "user" ? "U" : "AI";
+    const t = this.translations, s = `chat-message-${i.role}`, r = i.role === "user" ? t.userAvatar : t.assistantAvatar, o = t.loadingMessages[this.loadingMessageIndex] ?? "";
     return `
-      <div class="chat-message ${t}">
-        <div class="chat-message-avatar">${s}</div>
+      <div class="chat-message ${s}">
+        <div class="chat-message-avatar">${l(r)}</div>
         <div class="chat-message-content">
           <div class="chat-message-bubble">
-            ${i.content ? `<div class="chat-message-text">${Y(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">${g[this.loadingMessageIndex]}</span></div>` : ""}
+            ${i.content ? `<div class="chat-message-text">${se(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">${l(o)}</span></div>` : ""}
           </div>
           <div class="chat-message-metadata">
-            <span class="chat-message-time">${O(i.timestamp)}</span>
+            <span class="chat-message-time">${l(J(i.timestamp, this.translations))}</span>
           </div>
         </div>
       </div>
@@ -1292,12 +1387,15 @@ class N {
    * Set streaming state
    */
   setStreamingState(i) {
-    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();
+    this.isStreaming = i, this.inputElement && (this.inputElement.disabled = i), this.sendButton && (this.sendButton.disabled = i, this.sendButton.innerHTML = i ? '<div class="loading"></div>' : `<span>${l(this.translations.sendButtonLabel)}</span>`), i ? this.startLoadingMessages() : this.clearLoadingMessages();
   }
   startLoadingMessages() {
-    this.loadingMessageIndex = Math.floor(Math.random() * g.length), this.loadingMessageInterval = setInterval(() => {
-      this.loadingMessageIndex = (this.loadingMessageIndex + 1) % g.length, this.isStreaming && this.renderMessages(!0);
-    }, 2500);
+    this.clearLoadingMessages();
+    const i = this.translations.loadingMessages;
+    this.loadingMessageIndex = Math.floor(Math.random() * i.length), this.loadingMessageInterval = setInterval(() => {
+      const e = this.translations.loadingMessages;
+      this.loadingMessageIndex = (this.loadingMessageIndex + 1) % e.length, this.isStreaming && this.renderMessages(!0);
+    }, T);
   }
   clearLoadingMessages() {
     this.loadingMessageInterval && (clearInterval(this.loadingMessageInterval), this.loadingMessageInterval = null);
@@ -1320,6 +1418,19 @@ class N {
   setMessages(i) {
     this.messages = [...i], this.renderMessages();
   }
+  /**
+   * Update the props (e.g. placeholder / translations) and re-render.
+   *
+   * Safe to call at any time: existing messages and streaming state are
+   * preserved; listeners on the old DOM are removed and re-attached to the
+   * newly rendered elements.
+   */
+  setProps(i) {
+    this.props = i, this.translations = d(i.translations), this.detachEventListeners(), this.render(), this.attachEventListeners(), this.renderMessages(this.isStreaming), this.isStreaming && this.setStreamingState(!0);
+  }
+  detachEventListeners() {
+    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;
+  }
   /**
    * Destroy and cleanup
    */
@@ -1327,8 +1438,8 @@ class N {
     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 L = "chat-bubble-snippet";
-class W extends HTMLElement {
+const z = "chat-bubble-snippet";
+class re extends HTMLElement {
   constructor() {
     super();
     a(this, "shadow");
@@ -1337,6 +1448,8 @@ class W extends HTMLElement {
     a(this, "container", null);
     a(this, "isExpanded", !1);
     a(this, "isMinimized", !1);
+    a(this, "translationsOverride", null);
+    a(this, "resolvedTranslations", d(null));
     // Event handler references for cleanup
     a(this, "handleBubbleClick", null);
     a(this, "handleCloseClick", null);
@@ -1345,23 +1458,59 @@ class W extends HTMLElement {
     this.shadow = this.attachShadow({ mode: "open" });
   }
   static get observedAttributes() {
-    return ["api-url", "placeholder", "theme", "hide-branding"];
+    return ["api-url", "placeholder", "theme", "hide-branding", "translations"];
   }
   connectedCallback() {
-    this.render(), this.initializeClient(), this.dispatchEvent(v("ready", void 0));
+    this.syncTranslationsFromAttribute(), this.render(), this.initializeClient(), this.dispatchEvent(v("ready", void 0));
   }
   disconnectedCallback() {
     this.cleanup();
   }
   attributeChangedCallback(e, t, s) {
-    t !== s && (e === "api-url" ? this.initializeClient() : e === "theme" && this.updateTheme(s));
+    t !== s && (e === "api-url" ? this.initializeClient() : e === "theme" ? this.updateTheme(s) : e === "translations" && (this.syncTranslationsFromAttribute(), this.isConnected && this.rerenderAfterTranslationsChange()));
+  }
+  /**
+   * Get the current translations object.
+   */
+  get translations() {
+    return this.translationsOverride;
+  }
+  /**
+   * Override any user-facing string. Omitted keys fall back to English defaults.
+   */
+  set translations(e) {
+    this.translationsOverride = e ?? null, this.resolvedTranslations = d(this.translationsOverride), this.isConnected && this.rerenderAfterTranslationsChange();
+  }
+  syncTranslationsFromAttribute() {
+    if (this.translationsOverride) {
+      this.resolvedTranslations = d(this.translationsOverride);
+      return;
+    }
+    const e = k(
+      this.getAttribute("translations"),
+      "ChatBubbleSnippet"
+    );
+    this.resolvedTranslations = d(e);
+  }
+  rerenderAfterTranslationsChange() {
+    const e = this.isExpanded, t = this.isMinimized;
+    this.removeEventListeners();
+    const s = this.chatView ? this.shadow.querySelector(".chat-content") : null;
+    s?.parentNode && s.parentNode.removeChild(s), this.render(), e && (this.shadow.querySelector(".bubble-button")?.classList.add("hidden"), this.shadow.querySelector(".chat-window")?.classList.add("expanded"), t && this.shadow.querySelector(".chat-window")?.classList.add("minimized"));
+    const r = this.shadow.querySelector(".chat-window");
+    if (this.chatView && s && r) {
+      const o = r.querySelector(".chat-content");
+      o ? r.replaceChild(s, o) : r.appendChild(s), this.chatView.setProps(this.getProps());
+    } else e && this.initializeChatView();
   }
   getProps() {
+    const e = this.resolvedTranslations;
     return {
-      apiUrl: d(this.getAttribute("api-url"), ""),
-      placeholder: d(this.getAttribute("placeholder"), "Type a message..."),
-      theme: d(this.getAttribute("theme"), "auto"),
-      hideBranding: m(this.getAttribute("hide-branding"), !1)
+      apiUrl: p(this.getAttribute("api-url"), ""),
+      placeholder: p(this.getAttribute("placeholder"), e.chatPlaceholder),
+      theme: p(this.getAttribute("theme"), "auto"),
+      hideBranding: m(this.getAttribute("hide-branding"), !1),
+      translations: this.translationsOverride ?? void 0
     };
   }
   initializeClient() {
@@ -1371,15 +1520,15 @@ class W extends HTMLElement {
       return;
     }
     try {
-      this.client = x(e.apiUrl);
+      this.client = S(e.apiUrl);
     } catch (t) {
       console.error("ChatBubbleSnippet:", t);
     }
   }
   render() {
     const e = document.createElement("style");
-    e.textContent = `${C}
-${H}
+    e.textContent = `${M}
+${V}
 ${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() {
@@ -1524,8 +1673,9 @@ ${this.getBubbleStyles()}`, this.container = document.createElement("div"), this
     `;
   }
   getBaseHTML() {
+    const e = this.getProps(), t = this.resolvedTranslations, s = e.hideBranding ? "" : `<div class="powered-by">${E}</div>`;
     return `
-      <button class="bubble-button" aria-label="Open chat">
+      <button class="bubble-button" aria-label="${l(t.openChatAriaLabel)}">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
           <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
         </svg>
@@ -1536,21 +1686,21 @@ ${this.getBubbleStyles()}`, this.container = document.createElement("div"), this
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
               <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
             </svg>
-            <span>Chat</span>
+            <span>${l(t.chatTitle)}</span>
           </div>
           <div class="chat-header-actions">
-            <button class="icon-button clear-button" aria-label="Clear history">
+            <button class="icon-button clear-button" aria-label="${l(t.clearHistoryAriaLabel)}">
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                 <polyline points="3 6 5 6 21 6"></polyline>
                 <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
               </svg>
             </button>
-            <button class="icon-button minimize-button" aria-label="Minimize">
+            <button class="icon-button minimize-button" aria-label="${l(t.minimizeAriaLabel)}">
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                 <line x1="5" y1="12" x2="19" y2="12"></line>
               </svg>
             </button>
-            <button class="icon-button close-button" aria-label="Close">
+            <button class="icon-button close-button" aria-label="${l(t.closeAriaLabel)}">
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                 <line x1="18" y1="6" x2="6" y2="18"></line>
                 <line x1="6" y1="6" x2="18" y2="18"></line>
@@ -1559,7 +1709,7 @@ ${this.getBubbleStyles()}`, this.container = document.createElement("div"), this
           </div>
         </div>
         <div class="chat-content"></div>
-        ${this.getProps().hideBranding ? "" : `<div class="powered-by">${k}</div>`}
+        ${s}
       </div>
     `;
   }
@@ -1591,15 +1741,16 @@ ${this.getBubbleStyles()}`, this.container = document.createElement("div"), this
     const e = this.shadow.querySelector(".chat-content");
     if (!e) return;
     if (!this.client) {
+      const s = this.resolvedTranslations;
       e.innerHTML = `
         <div style="padding: 16px; color: var(--search-snippet-error-color, #ef4444); font-family: var(--search-snippet-font-family, sans-serif); font-size: var(--search-snippet-font-size-base, 14px);">
-          <strong>Error:</strong> The <code>api-url</code> attribute is required. Please provide a valid API URL.
+          <strong>${l(s.errorPrefix)}</strong> ${l(s.missingApiUrlError)}
         </div>
       `;
       return;
     }
     const t = this.getProps();
-    this.chatView = new N(e, this.client, t);
+    this.chatView = new K(e, this.client, t);
   }
   updateTheme(e) {
     (e === "light" || e === "dark" ? e : null) === null && this.hasAttribute("theme") && this.getAttribute("theme") !== "auto" && this.removeAttribute("theme");
@@ -1618,9 +1769,9 @@ ${this.getBubbleStyles()}`, this.container = document.createElement("div"), this
     return this.chatView?.getMessages() || [];
   }
 }
-customElements.get(L) || customElements.define(L, W);
-const I = "chat-page-snippet", z = "chat-page-sessions";
-class X extends HTMLElement {
+customElements.get(z) || customElements.define(z, re);
+const $ = "chat-page-snippet", R = "chat-page-sessions";
+class ae extends HTMLElement {
   constructor() {
     super();
     a(this, "shadow");
@@ -1630,6 +1781,8 @@ class X extends HTMLElement {
     a(this, "sessions", []);
     a(this, "currentSessionId", null);
     a(this, "sidebarCollapsed", !1);
+    a(this, "translationsOverride", null);
+    a(this, "resolvedTranslations", d(null));
     // Event handler references for cleanup
     a(this, "handleClearClick", null);
     a(this, "handleNewChatClick", null);
@@ -1639,23 +1792,70 @@ class X extends HTMLElement {
     this.shadow = this.attachShadow({ mode: "open" }), this.loadSessions();
   }
   static get observedAttributes() {
-    return ["api-url", "placeholder", "theme", "hide-branding"];
+    return ["api-url", "placeholder", "theme", "hide-branding", "translations"];
   }
   connectedCallback() {
-    this.render(), this.initializeClient(), this.setupView(), this.dispatchEvent(v("ready", void 0));
+    this.syncTranslationsFromAttribute(), this.render(), this.initializeClient(), this.setupView(), this.dispatchEvent(v("ready", void 0));
   }
   disconnectedCallback() {
     this.saveCurrentSession(), this.cleanup();
   }
   attributeChangedCallback(e, t, s) {
-    t !== s && (e === "api-url" ? (this.initializeClient(), this.setupView()) : e === "theme" && this.updateTheme(s));
+    t !== s && (e === "api-url" ? (this.initializeClient(), this.setupView()) : e === "theme" ? this.updateTheme(s) : e === "translations" && (this.syncTranslationsFromAttribute(), this.isConnected && this.rerenderAfterTranslationsChange()));
+  }
+  /**
+   * Get the current translations object.
+   */
+  get translations() {
+    return this.translationsOverride;
+  }
+  /**
+   * Override any user-facing string. Omitted keys fall back to English defaults.
+   */
+  set translations(e) {
+    this.translationsOverride = e ?? null, this.resolvedTranslations = d(this.translationsOverride), this.refreshDefaultSessionTitles(), this.isConnected && this.rerenderAfterTranslationsChange();
+  }
+  syncTranslationsFromAttribute() {
+    if (this.translationsOverride) {
+      this.resolvedTranslations = d(this.translationsOverride), this.refreshDefaultSessionTitles();
+      return;
+    }
+    const e = k(this.getAttribute("translations"), "ChatPageSnippet");
+    this.resolvedTranslations = d(e), this.refreshDefaultSessionTitles();
+  }
+  /**
+   * Replace the stored title of any still-default-titled session with the
+   * current `newChatButton` translation, so the sidebar reflects the active
+   * language after a translations change.
+   */
+  refreshDefaultSessionTitles() {
+    if (this.sessions.length === 0) return;
+    const e = this.resolvedTranslations.newChatButton;
+    let t = !1;
+    for (const s of this.sessions)
+      s.titleIsDefault && s.title !== e && (s.title = e, t = !0);
+    t && this.saveSessions();
+  }
+  rerenderAfterTranslationsChange() {
+    this.removeEventListeners();
+    const e = this.chatView ? this.shadow.querySelector(".container") : null;
+    e?.parentNode && e.parentNode.removeChild(e), this.render(), this.attachEventListeners(), this.renderChatList();
+    const t = this.shadow.querySelector(".chat-page-content");
+    if (this.chatView && e && t) {
+      const s = t.querySelector(".container");
+      s ? t.replaceChild(e, s) : t.appendChild(e), this.chatView.setProps(this.getProps()), this.handleMessageEvent = () => {
+        this.saveCurrentSession(), this.updateSessionTitle(), this.renderChatList();
+      }, e.addEventListener("message", this.handleMessageEvent);
+    }
   }
   getProps() {
+    const e = this.resolvedTranslations;
     return {
-      apiUrl: d(this.getAttribute("api-url"), ""),
-      placeholder: d(this.getAttribute("placeholder"), "Type a message..."),
-      theme: d(this.getAttribute("theme"), "auto"),
-      hideBranding: m(this.getAttribute("hide-branding"), !1)
+      apiUrl: p(this.getAttribute("api-url"), ""),
+      placeholder: p(this.getAttribute("placeholder"), e.chatPlaceholder),
+      theme: p(this.getAttribute("theme"), "auto"),
+      hideBranding: m(this.getAttribute("hide-branding"), !1),
+      translations: this.translationsOverride ?? void 0
     };
   }
   initializeClient() {
@@ -1665,15 +1865,15 @@ class X extends HTMLElement {
       return;
     }
     try {
-      this.client = x(e.apiUrl);
+      this.client = S(e.apiUrl);
     } catch (t) {
       console.error("ChatPageSnippet:", t);
     }
   }
   render() {
     const e = document.createElement("style");
-    e.textContent = `${C}
-${H}
+    e.textContent = `${M}
+${V}
 ${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() {
@@ -1953,24 +2153,25 @@ ${this.getPageStyles()}`, this.container = document.createElement("div"), this.c
     `;
   }
   getBaseHTML() {
+    const e = this.getProps(), t = this.resolvedTranslations, s = e.hideBranding ? "" : `<div class="powered-by">${E}</div>`;
     return `
       <div class="chat-sidebar">
         <div class="sidebar-header">
-          <span class="sidebar-title">History</span>
+          <span class="sidebar-title">${l(t.historyTitle)}</span>
         </div>
         <button class="new-chat-button">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <path d="M12 5v14M5 12h14"></path>
           </svg>
-          New Chat
+          ${l(t.newChatButton)}
         </button>
         <div class="chat-list"></div>
-        ${this.getProps().hideBranding ? "" : `<div class="powered-by">${k}</div>`}
+        ${s}
       </div>
       <div class="chat-main">
         <div class="chat-page-header">
           <div class="chat-page-header-left">
-            <button class="toggle-sidebar-button" title="Toggle sidebar">
+            <button class="toggle-sidebar-button" title="${l(t.toggleSidebarTitle)}">
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                 <path d="M3 12h18M3 6h18M3 18h18"></path>
               </svg>
@@ -1979,7 +2180,7 @@ ${this.getPageStyles()}`, this.container = document.createElement("div"), this.c
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                 <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
               </svg>
-              <span>Chat</span>
+              <span>${l(t.chatTitle)}</span>
             </div>
           </div>
           <div class="chat-page-header-actions">
@@ -1987,7 +2188,7 @@ ${this.getPageStyles()}`, this.container = document.createElement("div"), this.c
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                 <path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
               </svg>
-              Clear Chat
+              ${l(t.clearChatButton)}
             </button>
           </div>
         </div>
@@ -2008,16 +2209,19 @@ ${this.getPageStyles()}`, this.container = document.createElement("div"), this.c
   setupView() {
     const e = this.shadow.querySelector(".container");
     if (!this.client) {
-      e && (e.innerHTML = `
+      if (e) {
+        const s = this.resolvedTranslations;
+        e.innerHTML = `
           <div style="padding: 16px; color: var(--search-snippet-error-color, #ef4444); font-family: var(--search-snippet-font-family, sans-serif); font-size: var(--search-snippet-font-size-base, 14px);">
-            <strong>Error:</strong> The <code>api-url</code> attribute is required. Please provide a valid API URL.
+            <strong>${l(s.errorPrefix)}</strong> ${l(s.missingApiUrlError)}
           </div>
-        `);
+        `;
+      }
       return;
     }
     if (!e) return;
     const t = this.getProps();
-    if (this.chatView = new N(e, this.client, t), this.sessions.length === 0)
+    if (this.chatView = new K(e, this.client, t), this.sessions.length === 0)
       this.createNewChat();
     else {
       const s = this.sessions[0];
@@ -2032,7 +2236,7 @@ ${this.getPageStyles()}`, this.container = document.createElement("div"), this.c
   }
   loadSessions() {
     try {
-      const e = localStorage.getItem(z);
+      const e = localStorage.getItem(R);
       e && (this.sessions = JSON.parse(e), this.sessions.sort((t, s) => s.updatedAt - t.updatedAt));
     } catch (e) {
       console.error("Failed to load chat sessions:", e);
@@ -2040,7 +2244,7 @@ ${this.getPageStyles()}`, this.container = document.createElement("div"), this.c
   }
   saveSessions() {
     try {
-      localStorage.setItem(z, JSON.stringify(this.sessions));
+      localStorage.setItem(R, JSON.stringify(this.sessions));
     } catch (e) {
       console.error("Failed to save chat sessions:", e);
     }
@@ -2052,20 +2256,20 @@ ${this.getPageStyles()}`, this.container = document.createElement("div"), this.c
   }
   updateSessionTitle() {
     if (!this.currentSessionId) return;
-    const e = this.sessions.find((t) => t.id === this.currentSessionId);
-    if (e && e.messages.length > 0 && e.title === "New Chat") {
-      const t = e.messages.find((s) => s.role === "user");
-      t && (e.title = t.content.slice(0, 50) + (t.content.length > 50 ? "..." : ""), this.saveSessions());
-    }
+    const e = this.sessions.find((r) => r.id === this.currentSessionId);
+    if (!e || e.messages.length === 0 || !(e.titleIsDefault ?? e.title === this.resolvedTranslations.newChatButton)) return;
+    const s = e.messages.find((r) => r.role === "user");
+    s && (e.title = s.content.slice(0, 50) + (s.content.length > 50 ? "..." : ""), e.titleIsDefault = !1, this.saveSessions());
   }
   createNewChat() {
     this.saveCurrentSession();
     const e = {
       id: this.generateSessionId(),
-      title: "New Chat",
+      title: this.resolvedTranslations.newChatButton,
       messages: [],
       createdAt: Date.now(),
-      updatedAt: Date.now()
+      updatedAt: Date.now(),
+      titleIsDefault: !0
     };
     this.sessions.unshift(e), this.currentSessionId = e.id, this.saveSessions(), this.chatView?.clearMessages(), this.renderChatList();
   }
@@ -2082,7 +2286,7 @@ ${this.getPageStyles()}`, this.container = document.createElement("div"), this.c
   clearCurrentChat() {
     if (!this.currentSessionId) return;
     const e = this.sessions.find((t) => t.id === this.currentSessionId);
-    e && (e.messages = [], e.title = "New Chat", e.updatedAt = Date.now(), this.saveSessions()), this.chatView?.clearMessages(), this.renderChatList();
+    e && (e.messages = [], e.title = this.resolvedTranslations.newChatButton, e.titleIsDefault = !0, e.updatedAt = Date.now(), this.saveSessions()), this.chatView?.clearMessages(), this.renderChatList();
   }
   toggleSidebar() {
     this.sidebarCollapsed = !this.sidebarCollapsed, this.shadow.querySelector(".chat-sidebar")?.classList.toggle("collapsed", this.sidebarCollapsed);
@@ -2103,23 +2307,23 @@ ${this.getPageStyles()}`, this.container = document.createElement("div"), this.c
   }
   renderChatList() {
     const e = this.shadow.querySelector(".chat-list");
-    if (e) {
-      if (this.sessions.length === 0) {
-        e.innerHTML = '<div class="chat-list-empty">No chats yet</div>';
-        return;
-      }
-      e.innerHTML = this.sessions.map((t) => this.renderChatListItem(t)).join("");
+    if (!e) return;
+    const t = this.resolvedTranslations;
+    if (this.sessions.length === 0) {
+      e.innerHTML = `<div class="chat-list-empty">${this.escapeHTML(t.noChatsYet)}</div>`;
+      return;
     }
+    e.innerHTML = this.sessions.map((s) => this.renderChatListItem(s)).join("");
   }
   renderChatListItem(e) {
-    const t = e.id === this.currentSessionId, s = this.formatDate(e.updatedAt);
+    const t = e.id === this.currentSessionId, s = this.formatDate(e.updatedAt), r = this.resolvedTranslations.deleteChatTitle;
     return `
       <div class="chat-list-item ${t ? "active" : ""}" data-session-id="${e.id}">
         <div class="chat-list-item-content">
           <div class="chat-list-item-title">${this.escapeHTML(e.title)}</div>
           <div class="chat-list-item-date">${s}</div>
         </div>
-        <button class="chat-list-item-delete" data-session-id="${e.id}" title="Delete chat">
+        <button class="chat-list-item-delete" data-session-id="${e.id}" title="${this.escapeHTML(r)}">
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
           </svg>
@@ -2129,7 +2333,7 @@ ${this.getPageStyles()}`, this.container = document.createElement("div"), this.c
   }
   formatDate(e) {
     const t = new Date(e), r = (/* @__PURE__ */ new Date()).getTime() - t.getTime(), o = Math.floor(r / (1e3 * 60 * 60 * 24));
-    return o === 0 ? t.toLocaleTimeString(void 0, { hour: "2-digit", minute: "2-digit" }) : o === 1 ? "Yesterday" : o < 7 ? t.toLocaleDateString(void 0, { weekday: "long" }) : t.toLocaleDateString(void 0, { month: "short", day: "numeric" });
+    return o === 0 ? t.toLocaleTimeString(void 0, { hour: "2-digit", minute: "2-digit" }) : o === 1 ? this.resolvedTranslations.yesterday : o < 7 ? t.toLocaleDateString(void 0, { weekday: "long" }) : t.toLocaleDateString(void 0, { month: "short", day: "numeric" });
   }
   escapeHTML(e) {
     const t = document.createElement("div");
@@ -2158,8 +2362,8 @@ ${this.getPageStyles()}`, this.container = document.createElement("div"), this.c
     return this.sessions.find((e) => e.id === this.currentSessionId) || null;
   }
 }
-customElements.get(I) || customElements.define(I, X);
-const Z = `
+customElements.get($) || customElements.define($, ae);
+const ne = `
 /* Search view states */
 .search-view {
   transition: var(--search-snippet-transition-slow);
@@ -2529,8 +2733,8 @@ a.search-result-item:focus-visible {
   border-radius: 2px;
   font-weight: var(--search-snippet-font-weight-medium);
 }
-`, A = "search-bar-snippet", Q = 10, ee = 50;
-class te extends HTMLElement {
+`, q = "search-bar-snippet", B = 10, H = 50;
+class oe extends HTMLElement {
   constructor() {
     super();
     a(this, "shadow");
@@ -2543,6 +2747,8 @@ class te extends HTMLElement {
     a(this, "currentSearchController", null);
     a(this, "loadingMessageInterval", null);
     a(this, "loadingMessageIndex", 0);
+    a(this, "translationsOverride", null);
+    a(this, "resolvedTranslations", d(null));
     // Event handler references for cleanup
     a(this, "handleInputChange", null);
     a(this, "handleInputKeydownEnter", null);
@@ -2555,6 +2761,7 @@ class te extends HTMLElement {
       "api-url",
       "placeholder",
       "max-results",
+      "max-render-results",
       "debounce-ms",
       "theme",
       "hide-branding",
@@ -2562,30 +2769,71 @@ class te extends HTMLElement {
       "show-date",
       "hide-thumbnails",
       "see-more",
-      "request-options"
+      "request-options",
+      "translations"
     ];
   }
   connectedCallback() {
-    this.initializeClient(), this.render(), this.dispatchEvent(v("ready", void 0));
+    this.syncTranslationsFromAttribute(), this.initializeClient(), this.render(), this.dispatchEvent(v("ready", void 0));
   }
   disconnectedCallback() {
     this.cleanup();
   }
   attributeChangedCallback(e, t, s) {
-    t !== s && (e === "api-url" ? this.initializeClient() : e === "theme" && this.updateTheme(s));
+    t !== s && (e === "api-url" ? this.initializeClient() : e === "theme" ? this.updateTheme(s) : e === "translations" && (this.syncTranslationsFromAttribute(), this.isConnected && this.rerender()));
+  }
+  /**
+   * Get the current translations object. Mirrors the property getter.
+   */
+  get translations() {
+    return this.translationsOverride;
+  }
+  /**
+   * Override any user-facing string. Omitted keys fall back to English defaults.
+   */
+  set translations(e) {
+    this.translationsOverride = e ?? null, this.resolvedTranslations = d(this.translationsOverride), this.isConnected && this.rerender();
+  }
+  /**
+   * Re-render preserving the current query and re-running the search so
+   * results remain visible after a translations change at runtime.
+   */
+  rerender() {
+    const e = this.inputElement?.value ?? "";
+    this.render(), e && this.inputElement && (this.inputElement.value = e, e.trim().length > 0 && this.performSearch(e.trim()));
+  }
+  syncTranslationsFromAttribute() {
+    if (this.translationsOverride) {
+      this.resolvedTranslations = d(this.translationsOverride);
+      return;
+    }
+    const e = k(
+      this.getAttribute("translations"),
+      "SearchBarSnippet"
+    );
+    this.resolvedTranslations = d(e);
   }
   getProps() {
+    const e = this.resolvedTranslations;
     return {
-      apiUrl: d(this.getAttribute("api-url"), ""),
-      placeholder: d(this.getAttribute("placeholder"), "Search..."),
-      maxResults: y(this.getAttribute("max-results"), 10),
+      apiUrl: p(this.getAttribute("api-url"), ""),
+      placeholder: p(this.getAttribute("placeholder"), e.placeholder),
+      maxResults: y(
+        this.getAttribute("max-results"),
+        H
+      ),
+      maxRenderResults: y(
+        this.getAttribute("max-render-results"),
+        B
+      ),
       debounceMs: y(this.getAttribute("debounce-ms"), 300),
-      theme: d(this.getAttribute("theme"), "auto"),
+      theme: p(this.getAttribute("theme"), "auto"),
       hideBranding: m(this.getAttribute("hide-branding"), !1),
       showUrl: m(this.getAttribute("show-url"), !1),
       showDate: m(this.getAttribute("show-date"), !1),
       hideThumbnails: m(this.getAttribute("hide-thumbnails"), !1),
-      seeMore: d(this.getAttribute("see-more"), "")
+      seeMore: p(this.getAttribute("see-more"), ""),
+      translations: this.translationsOverride ?? void 0
     };
   }
   getRequestOptions() {
@@ -2608,20 +2856,20 @@ class te extends HTMLElement {
       return;
     }
     try {
-      this.client = x(e.apiUrl);
+      this.client = S(e.apiUrl);
     } catch (t) {
       console.error("SearchBarSnippet:", t);
     }
   }
   render() {
-    const e = this.getProps(), t = (r) => this.performSearch(r);
-    this.debouncedSearch = $(
-      t,
+    const e = this.getProps(), t = this.resolvedTranslations, s = (o) => this.performSearch(o);
+    this.debouncedSearch = P(
+      s,
       e.debounceMs || 400
     );
-    const s = document.createElement("style");
-    s.textContent = `${C}
-${Z}`, this.container = document.createElement("div"), this.container.className = "container", this.container.innerHTML = `
+    const r = document.createElement("style");
+    r.textContent = `${M}
+${ne}`, this.container = document.createElement("div"), this.container.className = "container", this.container.innerHTML = `
             <div class="search-view"> 
                 <div class="search-input-wrapper">
                     <svg xmlns="http://www.w3.org/2000/svg" class="search-icon" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg>
@@ -2629,12 +2877,12 @@ ${Z}`, this.container = document.createElement("div"), this.container.className
                         type="text"
                         name="search-input"
                         class="search-input"
-                        placeholder="${h(e.placeholder || "Search...")}"
-                        aria-label="Search input"
+                        placeholder="${l(e.placeholder || t.placeholder)}"
+                        aria-label="${l(t.searchInputAriaLabel)}"
                         autocomplete="off"
                     />
-                    <button class="button search-submit-button" aria-label="Search">
-                        <span>Search</span>
+                    <button class="button search-submit-button" aria-label="${l(t.searchButtonLabel)}">
+                        <span>${l(t.searchButtonLabel)}</span>
                     </button>
                 </div>
                 <div class="search-content">
@@ -2643,7 +2891,7 @@ ${Z}`, this.container = document.createElement("div"), this.container.className
                     </div>
                 </div>
             </div>
-        `, this.shadow.innerHTML = "", this.shadow.appendChild(s), this.shadow.appendChild(this.container), this.inputElement = this.container.querySelector(".search-input"), this.resultsContainer = this.container.querySelector(".search-results-wrapper"), this.searchButton = this.container.querySelector(".search-submit-button"), this.attachEventListeners(), this.client || this.showMissingApiUrlError();
+        `, this.shadow.innerHTML = "", this.shadow.appendChild(r), this.shadow.appendChild(this.container), this.inputElement = this.container.querySelector(".search-input"), this.resultsContainer = this.container.querySelector(".search-results-wrapper"), this.searchButton = this.container.querySelector(".search-submit-button"), this.attachEventListeners(), this.client || this.showMissingApiUrlError();
   }
   attachEventListeners() {
     this.inputElement && (this.handleInputChange = (e) => {
@@ -2668,12 +2916,12 @@ ${Z}`, this.container = document.createElement("div"), this.container.className
     }
     this.currentSearchController && (this.currentSearchController.abort(), this.currentSearchController = null), this.currentSearchController = new AbortController(), this.showLoadingState();
     try {
-      const t = await this.client.search(e, {
+      const t = this.getProps(), s = await this.client.search(e, {
         signal: this.currentSearchController.signal,
-        maxResults: ee,
+        maxResults: t.maxResults || H,
         request: this.getRequestOptions()
-      }), s = this.getProps(), r = t.slice(0, s.maxResults || Q);
-      this.displayResults(r, e, t.length);
+      }), r = s.slice(0, t.maxRenderResults || B);
+      this.displayResults(r, e, s.length);
     } catch (t) {
       if (t.name === "AbortError")
         return;
@@ -2688,37 +2936,39 @@ ${Z}`, this.container = document.createElement("div"), this.container.className
       this.showNoResultsState(t);
       return;
     }
-    const r = this.getProps(), o = r.hideBranding ? "" : `<div class="powered-by-inline">${k}</div>`, c = s > e.length, l = c ? `Showing ${e.length} of ${s} results` : `Found ${s} result${s === 1 ? "" : "s"}`, p = r.seeMore && c ? `<div class="search-footer">
-            <a href="${h(r.seeMore + encodeURIComponent(t))}" class="search-see-more">
-              <span>See more results</span>
+    const r = this.getProps(), o = this.resolvedTranslations, c = r.hideBranding ? "" : `<div class="powered-by-inline">${E}</div>`, h = s > e.length, u = h ? b(o.resultsCountOverflow, { n: e.length, total: s }) : b(s === 1 ? o.resultsCount : o.resultsCountPlural, {
+      n: s
+    }), f = r.seeMore && h ? `<div class="search-footer">
+            <a href="${l(r.seeMore + encodeURIComponent(t))}" class="search-see-more">
+              <span>${l(o.seeMoreResults)}</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>` : "", b = `
+          </div>` : "", g = `
             <div class="search-header">
                 <div class="search-count">
-                    ${l}
+                    ${l(u)}
                 </div>
-                ${o}
+                ${c}
             </div>
             <div class="search-results">
-                ${e.map((u) => this.renderResult(u)).join("")}
+                ${e.map((w) => this.renderResult(w)).join("")}
             </div>
-            ${p}
+            ${f}
         `;
-    this.resultsContainer.innerHTML = b, this.attachResultHandlers();
+    this.resultsContainer.innerHTML = g, this.attachResultHandlers();
   }
   renderResult(e) {
-    const t = this.getProps(), s = t.hideThumbnails ? "" : this.renderResultImage(e.image, e.title), r = e.url ? h(e.url) : "#", o = e.url ? h(q(e.url)) : "", c = t.showDate && e.timestamp !== void 0 ? `<div class="search-result-date">${h(B(e.timestamp))}</div>` : "", l = t.showUrl && e.url || c ? `<div class="search-result-metadata">
+    const t = this.getProps(), s = t.hideThumbnails ? "" : this.renderResultImage(e.image, e.title), r = e.url ? l(e.url) : "#", o = e.url ? l(U(e.url)) : "", c = t.showDate && e.timestamp !== void 0 ? `<div class="search-result-date">${l(j(e.timestamp))}</div>` : "", h = t.showUrl && e.url || c ? `<div class="search-result-metadata">
             ${t.showUrl && e.url ? `<span class="search-result-url">${o}</span>` : '<span class="search-result-url search-result-url-empty"></span>'}
             ${c}
           </div>` : "";
     return `
-            <a href="${r}" class="search-result-item" data-result-id="${h(e.url || "")}">
+            <a href="${r}" class="search-result-item" data-result-id="${l(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>
-                    ${l}
+                    <div class="search-result-title">${l(e.title || "")}</div>
+                    <div class="search-result-snippet">${l(e.description || "")}</div>
+                    ${h}
                 </div>
             </a>
         `;
@@ -2731,8 +2981,8 @@ ${Z}`, this.container = document.createElement("div"), this.container.className
         <div class="search-result-image-placeholder" style="display: none;">${s}</div>
         <img 
           class="search-result-image" 
-          src="${h(e)}" 
-          alt="${h(t)}"
+          src="${l(e)}" 
+          alt="${l(t)}"
           loading="lazy"
         />
       </div>
@@ -2763,60 +3013,72 @@ ${Z}`, this.container = document.createElement("div"), this.container.className
     });
   }
   showLoadingState() {
-    this.resultsContainer && (this.clearLoadingInterval(), this.loadingMessageIndex = Math.floor(Math.random() * g.length), this.resultsContainer.innerHTML = `
+    if (!this.resultsContainer) return;
+    this.clearLoadingInterval();
+    const e = this.resolvedTranslations.loadingMessages;
+    this.loadingMessageIndex = Math.floor(Math.random() * e.length);
+    const t = this.resolvedTranslations;
+    this.resultsContainer.innerHTML = `
             <div class="search-loading">
-                <div class="loading" aria-label="Loading"></div>
-                <div class="loading-text loading-text-animate">${g[this.loadingMessageIndex]}</div>
+                <div class="loading" aria-label="${l(t.loadingAriaLabel)}"></div>
+                <div class="loading-text loading-text-animate">${l(e[this.loadingMessageIndex])}</div>
             </div>
-        `, this.startLoadingInterval());
+        `, this.startLoadingInterval();
   }
   startLoadingInterval() {
     this.loadingMessageInterval = setInterval(() => {
-      this.loadingMessageIndex = (this.loadingMessageIndex + 1) % g.length;
-      const e = this.resultsContainer?.querySelector(".loading-text");
-      e && (e.classList.remove("loading-text-animate"), e.offsetWidth, e.textContent = g[this.loadingMessageIndex], e.classList.add("loading-text-animate"));
-    }, 2500);
+      const e = this.resolvedTranslations.loadingMessages;
+      this.loadingMessageIndex = (this.loadingMessageIndex + 1) % e.length;
+      const t = this.resultsContainer?.querySelector(".loading-text");
+      t && (t.classList.remove("loading-text-animate"), t.offsetWidth, t.textContent = e[this.loadingMessageIndex], t.classList.add("loading-text-animate"));
+    }, T);
   }
   clearLoadingInterval() {
     this.loadingMessageInterval && (clearInterval(this.loadingMessageInterval), this.loadingMessageInterval = null);
   }
   showEmptyState() {
-    this.clearLoadingInterval(), this.resultsContainer && (this.resultsContainer.innerHTML = `
+    if (this.clearLoadingInterval(), !this.resultsContainer) return;
+    const e = this.resolvedTranslations;
+    this.resultsContainer.innerHTML = `
             <div class="search-empty">
                 <svg class="search-empty-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                     <circle cx="11" cy="11" r="8"></circle>
                     <path d="m21 21-4.35-4.35"></path>
                 </svg>
-                <div class="search-empty-title">Start Searching</div>
+                <div class="search-empty-title">${l(e.emptyStateTitle)}</div>
                 <div class="search-empty-description">
-                    Enter a query to search for results
+                    ${l(e.emptyStateDescription)}
                 </div>
             </div>
-        `);
+        `;
   }
   showNoResultsState(e) {
-    this.clearLoadingInterval(), this.resultsContainer && (this.resultsContainer.innerHTML = `
+    if (this.clearLoadingInterval(), !this.resultsContainer) return;
+    const t = this.resolvedTranslations;
+    this.resultsContainer.innerHTML = `
             <div class="search-empty">
                 <svg class="search-empty-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                     <circle cx="11" cy="11" r="8"></circle>
                     <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                 </svg>
-                <div class="search-empty-title">No Results Found</div>
+                <div class="search-empty-title">${l(t.noResultsTitle)}</div>
                 <div class="search-empty-description">
-                    No results found for "${h(e)}"
+                    ${l(b(t.noResultsDescription, { query: e }))}
                 </div>
             </div>
-        `);
+        `;
   }
   showErrorState(e) {
-    this.clearLoadingInterval(), this.resultsContainer && (this.resultsContainer.innerHTML = `
+    if (this.clearLoadingInterval(), !this.resultsContainer) return;
+    const t = this.resolvedTranslations;
+    this.resultsContainer.innerHTML = `
             <div class="error">
-                <strong>Error:</strong> ${h(e)}
+                <strong>${l(t.errorPrefix)}</strong> ${l(e)}
             </div>
-        `);
+        `;
   }
   showMissingApiUrlError() {
-    this.resultsContainer && this.showErrorState("The api-url attribute is required. Please provide a valid API URL.");
+    this.resultsContainer && this.showErrorState(this.resolvedTranslations.missingApiUrlError);
   }
   updateTheme(e) {
     const t = e === "light" || e === "dark" || e === "auto" ? e : "auto";
@@ -2830,8 +3092,8 @@ ${Z}`, this.container = document.createElement("div"), this.container.className
     await this.performSearch(e);
   }
 }
-customElements.get(A) || customElements.define(A, te);
-const se = `
+customElements.get(q) || customElements.define(q, oe);
+const le = `
 /* Modal backdrop */
 .modal-backdrop {
   position: fixed;
@@ -3268,8 +3530,8 @@ a.modal-result-item:focus-visible {
 .modal-container.open {
   animation: modal-slide-in var(--search-snippet-transition) ease-out;
 }
-`, T = "search-modal-snippet", ie = 10, re = 50;
-class ae extends HTMLElement {
+`, O = "search-modal-snippet", D = 10, N = 50;
+class ce extends HTMLElement {
   constructor() {
     super();
     a(this, "shadow");
@@ -3286,6 +3548,8 @@ class ae extends HTMLElement {
     a(this, "currentSearchController", null);
     a(this, "loadingMessageInterval", null);
     a(this, "loadingMessageIndex", 0);
+    a(this, "translationsOverride", null);
+    a(this, "resolvedTranslations", d(null));
     // Event handler references for cleanup
     a(this, "handleGlobalKeydown", null);
     a(this, "handleInputChange", null);
@@ -3301,6 +3565,7 @@ class ae extends HTMLElement {
       "api-url",
       "placeholder",
       "max-results",
+      "max-render-results",
       "theme",
       "shortcut",
       "use-meta-key",
@@ -3310,32 +3575,79 @@ class ae extends HTMLElement {
       "show-date",
       "hide-thumbnails",
       "see-more",
-      "request-options"
+      "request-options",
+      "translations"
     ];
   }
   connectedCallback() {
-    this.initializeClient(), this.render(), this.attachGlobalKeyboardShortcut(), this.dispatchEvent(v("ready", void 0));
+    this.syncTranslationsFromAttribute(), this.initializeClient(), this.render(), this.attachGlobalKeyboardShortcut(), this.dispatchEvent(v("ready", void 0));
   }
   disconnectedCallback() {
     this.cleanup();
   }
   attributeChangedCallback(e, t, s) {
-    t !== s && (e === "api-url" ? this.initializeClient() : e === "theme" && this.updateTheme(s));
+    t !== s && (e === "api-url" ? this.initializeClient() : e === "theme" ? this.updateTheme(s) : e === "translations" && (this.syncTranslationsFromAttribute(), this.isConnected && this.rerender()));
+  }
+  /**
+   * Get the current translations object.
+   */
+  get translations() {
+    return this.translationsOverride;
+  }
+  /**
+   * Override any user-facing string. Omitted keys fall back to English defaults.
+   */
+  set translations(e) {
+    this.translationsOverride = e ?? null, this.resolvedTranslations = d(this.translationsOverride), this.isConnected && this.rerender();
+  }
+  /**
+   * Re-render while preserving open state and the current query. Results are
+   * re-fetched so the list reflects the updated translation strings around
+   * them (counts, footer hints, etc.). Selection resets to none — the same
+   * behavior as the immediate post-search state.
+   */
+  rerender() {
+    const e = this.isOpen, t = this.inputElement?.value ?? "";
+    this.isOpen = !1, this.render(), e && (this.isOpen = !0, this.backdrop?.classList.add("open"), this.modal?.classList.add("open"), requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        this.inputElement?.focus();
+      });
+    })), t && this.inputElement && (this.inputElement.value = t, t.trim().length > 0 && this.performSearch(t.trim()));
+  }
+  syncTranslationsFromAttribute() {
+    if (this.translationsOverride) {
+      this.resolvedTranslations = d(this.translationsOverride);
+      return;
+    }
+    const e = k(
+      this.getAttribute("translations"),
+      "SearchModalSnippet"
+    );
+    this.resolvedTranslations = d(e);
   }
   getProps() {
+    const e = this.resolvedTranslations;
     return {
-      apiUrl: d(this.getAttribute("api-url"), ""),
-      placeholder: d(this.getAttribute("placeholder"), "Search..."),
-      maxResults: y(this.getAttribute("max-results"), 10),
+      apiUrl: p(this.getAttribute("api-url"), ""),
+      placeholder: p(this.getAttribute("placeholder"), e.placeholder),
+      maxResults: y(
+        this.getAttribute("max-results"),
+        N
+      ),
+      maxRenderResults: y(
+        this.getAttribute("max-render-results"),
+        D
+      ),
       debounceMs: y(this.getAttribute("debounce-ms"), 300),
-      theme: d(this.getAttribute("theme"), "auto"),
-      shortcut: d(this.getAttribute("shortcut"), "k"),
+      theme: p(this.getAttribute("theme"), "auto"),
+      shortcut: p(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),
       showDate: m(this.getAttribute("show-date"), !1),
       hideThumbnails: m(this.getAttribute("hide-thumbnails"), !1),
-      seeMore: d(this.getAttribute("see-more"), "")
+      seeMore: p(this.getAttribute("see-more"), ""),
+      translations: this.translationsOverride ?? void 0
     };
   }
   getRequestOptions() {
@@ -3358,22 +3670,22 @@ class ae extends HTMLElement {
       return;
     }
     try {
-      this.client = x(e.apiUrl);
+      this.client = S(e.apiUrl);
     } catch (t) {
       console.error("SearchModalSnippet:", t);
     }
   }
   render() {
-    const e = this.getProps(), t = (c) => this.performSearch(c);
-    this.debouncedSearch = $(
-      t,
+    const e = this.getProps(), t = this.resolvedTranslations, s = (h) => this.performSearch(h);
+    this.debouncedSearch = P(
+      s,
       e.debounceMs || 300
     );
-    const s = document.createElement("style");
-    s.textContent = `${C}
-${se}`;
-    const r = e.hideBranding ? "" : `<div class="powered-by-inline">${k}</div>`, o = document.createElement("div");
-    o.innerHTML = `
+    const r = document.createElement("style");
+    r.textContent = `${M}
+${le}`;
+    const o = e.hideBranding ? "" : `<div class="powered-by-inline">${E}</div>`, c = document.createElement("div");
+    c.innerHTML = `
       <div class="modal-backdrop" role="presentation"></div>
       <div class="modal-container" role="dialog" aria-modal="true" aria-labelledby="modal-title">
         <div class="modal-header">
@@ -3383,8 +3695,8 @@ ${se}`;
           <input
             type="text"
             class="modal-search-input"
-            placeholder="${h(e.placeholder || "Search...")}"
-            aria-label="Search"
+            placeholder="${l(e.placeholder || t.placeholder)}"
+            aria-label="${l(t.searchButtonLabel)}"
             aria-autocomplete="list"
             aria-controls="modal-results-list"
             aria-expanded="false"
@@ -3393,7 +3705,7 @@ ${se}`;
           />
         </div>
         <div class="modal-content">
-          <div class="modal-results" id="modal-results-list" role="listbox" aria-label="Search results">
+          <div class="modal-results" id="modal-results-list" role="listbox" aria-label="${l(t.searchResultsAriaLabel)}">
             ${this.renderEmptyState()}
           </div>
         </div>
@@ -3402,21 +3714,21 @@ ${se}`;
             <div class="modal-footer-hint">
               <kbd class="modal-kbd">↑</kbd>
               <kbd class="modal-kbd">↓</kbd>
-              <span>Navigate</span>
+              <span>${l(t.navigateHint)}</span>
             </div>
             <div class="modal-footer-hint">
               <kbd class="modal-kbd">↵</kbd>
-              <span>Select</span>
+              <span>${l(t.selectHint)}</span>
             </div>
             <div class="modal-footer-hint">
               <kbd class="modal-kbd">Esc</kbd>
-              <span>Close</span>
+              <span>${l(t.closeHint)}</span>
             </div>
           </div>
-          ${r}
+          ${o}
         </div>
       </div>
-    `, this.shadow.innerHTML = "", this.shadow.appendChild(s), this.shadow.appendChild(o), this.backdrop = this.shadow.querySelector(".modal-backdrop"), this.modal = this.shadow.querySelector(".modal-container"), this.inputElement = this.shadow.querySelector(".modal-search-input"), this.resultsContainer = this.shadow.querySelector(".modal-results"), this.footerCount = this.shadow.querySelector(".modal-results-count"), this.attachEventListeners(), this.client || this.showMissingApiUrlError();
+    `, this.shadow.innerHTML = "", this.shadow.appendChild(r), this.shadow.appendChild(c), this.backdrop = this.shadow.querySelector(".modal-backdrop"), this.modal = this.shadow.querySelector(".modal-container"), this.inputElement = this.shadow.querySelector(".modal-search-input"), this.resultsContainer = this.shadow.querySelector(".modal-results"), this.footerCount = this.shadow.querySelector(".modal-results-count"), this.attachEventListeners(), this.client || this.showMissingApiUrlError();
   }
   attachGlobalKeyboardShortcut() {
     const e = this.getProps(), t = e.shortcut?.toLowerCase() || "k";
@@ -3483,12 +3795,12 @@ ${se}`;
     }
     this.currentSearchController && (this.currentSearchController.abort(), this.currentSearchController = null), this.currentSearchController = new AbortController(), this.showLoadingState();
     try {
-      const t = await this.client.search(e, {
+      const t = this.getProps(), s = await this.client.search(e, {
         signal: this.currentSearchController.signal,
-        maxResults: re,
+        maxResults: t.maxResults || N,
         request: this.getRequestOptions()
-      }), s = this.getProps();
-      this.results = t.slice(0, s.maxResults || ie), this.activeIndex = this.results.length > 0 ? 0 : -1, this.displayResults(this.results, e, t.length);
+      });
+      this.results = s.slice(0, t.maxRenderResults || D), this.activeIndex = this.results.length > 0 ? 0 : -1, this.displayResults(this.results, e, s.length);
     } catch (t) {
       if (t.name === "AbortError")
         return;
@@ -3503,16 +3815,18 @@ ${se}`;
       this.showNoResultsState(t);
       return;
     }
-    const r = this.getProps(), o = e.map((b, u) => this.renderResult(b, u)).join(""), c = s > e.length, l = c ? `Showing ${e.length} of ${s} results` : `${s} result${s === 1 ? "" : "s"}`, p = r.seeMore && c ? `<a href="${h(r.seeMore + encodeURIComponent(t))}" class="modal-see-more">
-            <span>See more results</span>
+    const r = this.getProps(), o = this.resolvedTranslations, c = e.map((g, w) => this.renderResult(g, w)).join(""), h = s > e.length, u = h ? b(o.resultsCountOverflow, { n: e.length, total: s }) : b(s === 1 ? o.modalResultsCount : o.modalResultsCountPlural, {
+      n: s
+    }), f = r.seeMore && h ? `<a href="${l(r.seeMore + encodeURIComponent(t))}" class="modal-see-more">
+            <span>${l(o.seeMoreResults)}</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 = o + p, this.footerCount && (this.footerCount.textContent = l), this.inputElement && this.inputElement.setAttribute("aria-expanded", "true"), this.attachResultHandlers(), this.updateActiveResult();
+    this.resultsContainer.innerHTML = c + f, this.footerCount && (this.footerCount.textContent = u), 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), o = e.url ? h(e.url) : "#", c = e.url ? h(q(e.url)) : "", l = s.showDate && e.timestamp !== void 0 ? `<div class="modal-result-date">${h(B(e.timestamp))}</div>` : "", p = s.showUrl && e.url || l ? `<div class="modal-result-metadata">
+    const s = this.getProps(), r = s.hideThumbnails ? "" : this.renderResultImage(e.image, e.title), o = e.url ? l(e.url) : "#", c = e.url ? l(U(e.url)) : "", h = s.showDate && e.timestamp !== void 0 ? `<div class="modal-result-date">${l(j(e.timestamp))}</div>` : "", u = s.showUrl && e.url || h ? `<div class="modal-result-metadata">
             ${s.showUrl && e.url ? `<span class="modal-result-url">${c}</span>` : '<span class="modal-result-url modal-result-url-empty"></span>'}
-            ${l}
+            ${h}
           </div>` : "";
     return `
       <a 
@@ -3523,13 +3837,13 @@ ${se}`;
         aria-selected="${t === this.activeIndex}"
         tabindex="-1"
         data-index="${t}"
-        data-url="${h(e.url || "")}"
+        data-url="${l(e.url || "")}"
       >
         ${r}
         <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>` : ""}
-          ${p}
+          <div class="modal-result-title">${l(e.title || "")}</div>
+          ${e.description ? `<div class="modal-result-description">${l(e.description)}</div>` : ""}
+          ${u}
         </div>
       </a>
     `;
@@ -3542,8 +3856,8 @@ ${se}`;
         <div class="modal-result-image-placeholder" style="display: none;">${s}</div>
         <img 
           class="modal-result-image" 
-          src="${h(e)}" 
-          alt="${h(t)}"
+          src="${l(e)}" 
+          alt="${l(t)}"
           loading="lazy"
         />
       </div>
@@ -3576,13 +3890,14 @@ ${se}`;
     });
   }
   renderEmptyState() {
+    const e = this.resolvedTranslations;
     return `
       <div class="modal-empty">
         <svg class="modal-empty-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
           <circle cx="11" cy="11" r="8"></circle>
           <path d="m21 21-4.35-4.35"></path>
         </svg>
-        <div class="modal-empty-description">Start typing to search</div>
+        <div class="modal-empty-description">${l(e.modalEmptyStateDescription)}</div>
       </div>
     `;
   }
@@ -3590,44 +3905,52 @@ ${se}`;
     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() * g.length), this.resultsContainer.innerHTML = `
+    if (!this.resultsContainer) return;
+    this.clearLoadingInterval();
+    const e = this.resolvedTranslations.loadingMessages, t = this.resolvedTranslations;
+    this.loadingMessageIndex = Math.floor(Math.random() * e.length), this.resultsContainer.innerHTML = `
       <div class="modal-loading">
-        <div class="loading" aria-label="Loading"></div>
-        <div class="loading-text loading-text-animate">${g[this.loadingMessageIndex]}</div>
+        <div class="loading" aria-label="${l(t.loadingAriaLabel)}"></div>
+        <div class="loading-text loading-text-animate">${l(e[this.loadingMessageIndex])}</div>
       </div>
-    `, this.footerCount && (this.footerCount.textContent = g[this.loadingMessageIndex]), this.startLoadingInterval());
+    `, this.footerCount && (this.footerCount.textContent = e[this.loadingMessageIndex]), this.startLoadingInterval();
   }
   startLoadingInterval() {
     this.loadingMessageInterval = setInterval(() => {
-      this.loadingMessageIndex = (this.loadingMessageIndex + 1) % g.length;
-      const e = this.resultsContainer?.querySelector(".loading-text");
-      e && (e.classList.remove("loading-text-animate"), e.offsetWidth, e.textContent = g[this.loadingMessageIndex], e.classList.add("loading-text-animate")), this.footerCount && (this.footerCount.textContent = g[this.loadingMessageIndex]);
-    }, 2500);
+      const e = this.resolvedTranslations.loadingMessages;
+      this.loadingMessageIndex = (this.loadingMessageIndex + 1) % e.length;
+      const t = this.resultsContainer?.querySelector(".loading-text");
+      t && (t.classList.remove("loading-text-animate"), t.offsetWidth, t.textContent = e[this.loadingMessageIndex], t.classList.add("loading-text-animate")), this.footerCount && (this.footerCount.textContent = e[this.loadingMessageIndex]);
+    }, T);
   }
   clearLoadingInterval() {
     this.loadingMessageInterval && (clearInterval(this.loadingMessageInterval), this.loadingMessageInterval = null);
   }
   showNoResultsState(e) {
-    this.clearLoadingInterval(), this.resultsContainer && (this.resultsContainer.innerHTML = `
+    if (this.clearLoadingInterval(), !this.resultsContainer) return;
+    const t = this.resolvedTranslations;
+    this.resultsContainer.innerHTML = `
       <div class="modal-empty">
         <svg class="modal-empty-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
           <circle cx="11" cy="11" r="8"></circle>
           <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
         </svg>
-        <div class="modal-empty-title">No results found</div>
-        <div class="modal-empty-description">No results for "${h(e)}"</div>
+        <div class="modal-empty-title">${l(t.modalNoResultsTitle)}</div>
+        <div class="modal-empty-description">${l(b(t.modalNoResultsDescription, { query: e }))}</div>
       </div>
-    `, this.footerCount && (this.footerCount.textContent = "0 results"), this.inputElement && this.inputElement.setAttribute("aria-expanded", "false"));
+    `, this.footerCount && (this.footerCount.textContent = t.modalResultsCountZero), this.inputElement && this.inputElement.setAttribute("aria-expanded", "false");
   }
   showErrorState(e) {
-    this.clearLoadingInterval(), this.resultsContainer && (this.resultsContainer.innerHTML = `
+    if (this.clearLoadingInterval(), !this.resultsContainer) return;
+    const t = this.resolvedTranslations;
+    this.resultsContainer.innerHTML = `
       <div class="error">
-        <strong>Error:</strong> ${h(e)}
+        <strong>${l(t.errorPrefix)}</strong> ${l(e)}
       </div>
-    `, this.footerCount && (this.footerCount.textContent = "Error"));
+    `, this.footerCount && (this.footerCount.textContent = t.modalResultsCountError);
   }
   showMissingApiUrlError() {
-    this.resultsContainer && this.showErrorState("The api-url attribute is required. Please provide a valid API URL.");
+    this.resultsContainer && this.showErrorState(this.resolvedTranslations.missingApiUrlError);
   }
   updateTheme(e) {
     const t = e === "light" || e === "dark" || e === "auto" ? e : "auto";
@@ -3693,13 +4016,15 @@ ${se}`;
     return this.isOpen;
   }
 }
-customElements.get(T) || customElements.define(T, ae);
+customElements.get(O) || customElements.define(O, ce);
 export {
-  K as AISearchClient,
-  W as ChatBubbleSnippet,
-  X as ChatPageSnippet,
-  te as SearchBarSnippet,
-  ae as SearchModalSnippet,
-  te as default
+  Q as AISearchClient,
+  re as ChatBubbleSnippet,
+  ae as ChatPageSnippet,
+  L as DEFAULT_TRANSLATIONS,
+  oe as SearchBarSnippet,
+  ce as SearchModalSnippet,
+  oe as default,
+  d as mergeTranslations
 };
 //# sourceMappingURL=search-snippet.es.js.map