@cloudflare/ai-search-snippet 0.0.17

package/dist/search-snippet.umd.js

@@ -0,0 +1,2206 @@
+(function(d,u){typeof exports=="object"&&typeof module<"u"?u(exports):typeof define=="function"&&define.amd?define(["exports"],u):(d=typeof globalThis<"u"?globalThis:d||self,u(d.SearchSnippet={}))})(this,(function(d){"use strict";var F=Object.defineProperty;var G=(d,u,l)=>u in d?F(d,u,{enumerable:!0,configurable:!0,writable:!0,value:l}):d[u]=l;var a=(d,u,l)=>G(d,typeof u!="symbol"?u+"":u,l);function u(o,i){let e;return function(...s){const r=()=>{clearTimeout(e),o(...s)};clearTimeout(e),e=setTimeout(r,i)}}function l(o){const i=document.createElement("div");return i.textContent=o,i.innerHTML}function L(o){return new DOMParser().parseFromString(o,"text/html").documentElement.textContent||""}function P(o){const i=new Date(o),t=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`}if(t<864e5){const s=Math.floor(t/36e5);return`${s} ${s===1?"hour":"hours"} ago`}return i.toLocaleString(void 0,{month:"short",day:"numeric",hour:"2-digit",minute:"2-digit"})}function M(o="id"){return`${o}-${Date.now()}-${Math.random().toString(36).substr(2,9)}`}function g(o,i){return o!==null?o:i}function w(o,i){return o===null?i:o==="true"||o===""}function y(o,i){if(o===null)return i;const e=Number.parseInt(o,10);return Number.isNaN(e)?i:e}function v(o,i){return new CustomEvent(o,{detail:i,bubbles:!0,composed:!0,cancelable:!0})}function x(o){if(!o)throw new Error("API URL is required");return new z(o)}class j{constructor(i){a(this,"activeRequests",new Map);a(this,"baseUrl");this.baseUrl=i.replace(/\/$/,"")}search(i,e){throw new Error("Not implemented")}searchStream(i,e){throw new Error("Not implemented")}chat(i,e){throw new Error("Not implemented")}cancelRequest(i){throw new Error("Not implemented")}cancelAllRequests(){throw new Error("Not implemented")}}class z extends j{request(i={},e,t){return fetch(`${this.baseUrl}/${e}`,{method:"POST",body:JSON.stringify({messages:[{role:"user",content:i.query}],stream:i.streaming,max_results:i.maxResults}),headers:{"Content-Type":"application/json"},signal:t})}async search(i,e={}){const t=this.generateRequestId(),s=new AbortController,r=e.signal||s.signal;this.registerRequest(t,s);try{const n=await this.request({query:i,streaming:!1,maxResults:30},"search",r);if(!n.ok)throw new Error(`HTTP error! status: ${n.status}`);if(!n.body)throw new Error("Response body is empty");const c=await n.json();if(c.success&&c.result){const h=new Map;for(const p of c.result.chunks){const b=p.item.key,m=p.scoring_details.vector_score;(!h.has(b)||(h.get(b)?.score??0)<m)&&h.set(b,{chunk:p,score:m})}return Array.from(h.values()).sort((p,b)=>b.score-p.score).slice(0,10).map(({chunk:p})=>({type:"result",id:p.id,title:L(p.item.metadata.title),description:L(p.item.metadata.description),url:p.item.key,image:p.item.metadata.image||void 0,metadata:p.item.metadata}))}throw c.success===!1?new Error(c.error):new Error("Unknown error")}finally{this.unregisterRequest(t)}}async*searchStream(i,e){const t=this.generateRequestId(),s=new AbortController,r=e?.signal||s.signal;this.registerRequest(t,s);const n=await this.request({query:i,streaming:!0},"ai-search",r);if(!n.ok)throw new Error(`HTTP error! status: ${n.status}`);if(!n.body)throw new Error("Response body is empty");let c="";const h=n.body.getReader(),p=new TextDecoder;for(;;){const{done:m,value:E}=await h.read();if(m)break;const U=p.decode(E,{stream:!0});c+=U}yield{type:"result",id:"",title:"",description:c.replaceAll("data: ","").trim().split(`
+
+`).map(m=>JSON.parse(m)).map(m=>m.response).join(""),url:"",metadata:{}}}async*chat(i,e){const t=new AbortController,s=e?.signal||t.signal,r=await this.request({query:i,streaming:!1},"chat/completions",s);if(!r.ok)throw new Error(`HTTP error! status: ${r.status}`);if(!r.body)throw new Error("Response body is empty");yield{type:"text",message:(await r.json()).choices.map(c=>c.message.content).join("")}}cancelRequest(i){const e=this.activeRequests.get(i);e&&(e.controller.abort(),this.unregisterRequest(i))}cancelAllRequests(){for(const[i]of this.activeRequests)this.cancelRequest(i)}registerRequest(i,e){this.activeRequests.set(i,{id:i,controller:e,timestamp:Date.now()})}unregisterRequest(i){this.activeRequests.delete(i)}generateRequestId(){return`req-${Date.now()}-${Math.random().toString(36).substr(2,9)}`}}const I=`
+/* Chat container */
+.chat-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow-y: auto;
+}
+
+/* Messages area */
+.chat-messages {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: var(--search-snippet-spacing-md);
+  display: flex;
+  flex-direction: column;
+  gap: var(--search-snippet-spacing-md);
+}
+
+.chat-messages::-webkit-scrollbar {
+  width: 8px;
+}
+
+.chat-messages::-webkit-scrollbar-track {
+  background: var(--search-snippet-surface);
+}
+
+.chat-messages::-webkit-scrollbar-thumb {
+  background: var(--search-snippet-border-color);
+  border-radius: var(--search-snippet-border-radius);
+}
+
+.chat-messages::-webkit-scrollbar-thumb:hover {
+  background: var(--search-snippet-text-secondary);
+}
+
+/* Message */
+.chat-message {
+  display: flex;
+  gap: var(--search-snippet-spacing-sm);
+  max-width: 85%;
+  animation: slideIn var(--search-snippet-animation-duration) ease-out;
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.chat-message-user {
+  align-self: flex-end;
+  flex-direction: row-reverse;
+}
+
+.chat-message-assistant {
+  align-self: flex-start;
+}
+
+.chat-message-system {
+  align-self: center;
+  max-width: 100%;
+}
+
+/* Message avatar */
+.chat-message-avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  font-size: var(--search-snippet-font-size-sm);
+  font-weight: var(--search-snippet-font-weight-bold);
+  background: var(--search-snippet-primary-color);
+  color: white;
+}
+
+.chat-message-assistant .chat-message-avatar {
+  background: var(--search-snippet-surface);
+  color: var(--search-snippet-text-color);
+  border: var(--search-snippet-border-width) solid var(--search-snippet-border-color);
+}
+
+/* Message content */
+.chat-message-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--search-snippet-spacing-xs);
+  max-width: 100%;
+}
+
+.chat-message-content ol, .chat-message-content ul {
+  margin-inline-start: 16px;
+}
+
+.chat-message-content ol li, .chat-message-content ul li {
+  padding-inline-start: 0;
+}
+
+.chat-message-bubble {
+  padding: var(--search-snippet-spacing-sm) var(--search-snippet-spacing-md);
+  border-radius: var(--search-snippet-border-radius);
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+.chat-message-user .chat-message-bubble {
+  background: var(--search-snippet-user-message-bg);
+  color: var(--search-snippet-user-message-text);
+  border-top-right-radius: var(--search-snippet-spacing-xs);
+}
+
+.chat-message-assistant .chat-message-bubble {
+  background: var(--search-snippet-assistant-message-bg);
+  color: var(--search-snippet-assistant-message-text);
+  border-top-left-radius: var(--search-snippet-spacing-xs);
+  border: var(--search-snippet-border-width) solid var(--search-snippet-border-color);
+}
+
+.chat-message-system .chat-message-bubble {
+  background: var(--search-snippet-system-message-bg);
+  color: var(--search-snippet-system-message-text);
+  text-align: center;
+  font-size: var(--search-snippet-font-size-sm);
+  padding: var(--search-snippet-spacing-xs) var(--search-snippet-spacing-md);
+}
+
+.chat-message-text {
+  font-size: var(--search-snippet-font-size-base);
+  line-height: 1.5;
+  white-space: wrap;
+}
+.chat-message-text li{
+  padding-inline-start: var(--search-snippet-spacing-md);
+}
+
+.chat-message-metadata {
+  display: flex;
+  align-items: center;
+  gap: var(--search-snippet-spacing-sm);
+  font-size: var(--search-snippet-font-size-sm);
+  color: var(--search-snippet-text-secondary);
+}
+
+.chat-message-user .chat-message-metadata {
+  justify-content: flex-end;
+}
+
+.chat-message-time {
+  opacity: 0.7;
+}
+
+/* Streaming indicator */
+.chat-streaming {
+  display: flex;
+  align-items: center;
+  gap: var(--search-snippet-spacing-xs);
+}
+
+.chat-streaming-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: currentColor;
+  animation: pulse 1.4s ease-in-out infinite;
+}
+
+.chat-streaming-dot:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.chat-streaming-dot:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes pulse {
+  0%, 80%, 100% {
+    opacity: 0.3;
+    transform: scale(0.8);
+  }
+  40% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* Input area */
+.chat-input-area {
+  padding: var(--search-snippet-spacing-md);
+  border-top: var(--search-snippet-border-width) solid var(--search-snippet-border-color);
+  background: var(--search-snippet-surface);
+}
+
+.chat-input-wrapper {
+  display: flex;
+  gap: var(--search-snippet-spacing-sm);
+  align-items: flex-end;
+}
+
+.chat-input {
+  flex: 1;
+  min-height: var(--search-snippet-input-height);
+  max-height: 120px;
+  padding: var(--search-snippet-spacing-sm) var(--search-snippet-spacing-md);
+  font-family: var(--search-snippet-font-family);
+  font-size: var(--search-snippet-font-size-base);
+  line-height: var(--search-snippet-line-height);
+  color: var(--search-snippet-text-color);
+  background: var(--search-snippet-background);
+  border: var(--search-snippet-border-width) solid var(--search-snippet-border-color);
+  border-radius: var(--search-snippet-border-radius);
+  outline: none;
+  resize: vertical;
+  transition: var(--search-snippet-transition);
+}
+
+.chat-input:focus {
+  border-color: var(--search-snippet-primary-color);
+  box-shadow: 0 0 0 3px var(--search-snippet-focus-ring);
+}
+
+.chat-input::placeholder {
+  color: var(--search-snippet-text-secondary);
+}
+
+.chat-input:disabled {
+  background: var(--search-snippet-surface);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.chat-send-button {
+  flex-shrink: 0;
+  height: var(--search-snippet-input-height);
+  padding: 0 var(--search-snippet-spacing-lg);
+}
+
+.chat-send-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* Empty chat state */
+.chat-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--search-snippet-spacing-xxl);
+  gap: var(--search-snippet-spacing-md);
+  color: var(--search-snippet-text-secondary);
+  text-align: center;
+  height: 100%;
+}
+
+.chat-empty-icon {
+  width: 64px;
+  height: 64px;
+  opacity: 0.5;
+}
+
+.chat-empty-title {
+  font-size: var(--search-snippet-font-size-lg);
+  font-weight: var(--search-snippet-font-weight-medium);
+  color: var(--search-snippet-text-color);
+}
+
+.chat-empty-description {
+  font-size: var(--search-snippet-font-size-sm);
+}
+
+/* Code blocks in messages */
+.chat-message-bubble pre {
+  background: var(--search-snippet-surface);
+  padding: var(--search-snippet-spacing-sm);
+  border-radius: var(--search-snippet-border-radius);
+  overflow-x: auto;
+  font-family: var(--search-snippet-font-family-mono);
+  font-size: var(--search-snippet-font-size-sm);
+  margin: var(--search-snippet-spacing-xs) 0;
+}
+
+.chat-message-bubble code {
+  font-family: var(--search-snippet-font-family-mono);
+  font-size: 0.9em;
+  background: var(--search-snippet-surface);
+  padding: 2px 4px;
+  border-radius: var(--search-snippet-border-radius);
+}
+
+.chat-message-bubble pre code {
+  background: none;
+  padding: 0;
+}
+
+/* Links in messages */
+.chat-message-bubble a {
+  color: var(--search-snippet-primary-color);
+  text-decoration: underline;
+}
+
+.chat-message-bubble a:hover {
+  text-decoration: none;
+}
+`,k=`
+:host {
+  /* Colors - Light Mode */
+  --search-snippet-primary-color: #2563eb;
+  --search-snippet-primary-hover: #0f51dfff;
+  --search-snippet-background: #ffffff;
+  --search-snippet-surface: #f8f9fa;
+  --search-snippet-text-color: #212529;
+  --search-snippet-text-secondary: #6c757d;
+  --search-snippet-border-color: #dee2e6;
+  --search-snippet-hover-background: #f1f3f5;
+  --search-snippet-focus-ring: #0066cc40;
+  --search-snippet-error-color: #dc3545;
+  --search-snippet-error-background: #f8d7da;
+  --search-snippet-success-color: #28a745;
+  --search-snippet-success-background: #d4edda;
+  --search-snippet-warning-color: #ffc107;
+  --search-snippet-warning-background: #fff3cd;
+  
+  /* Message Colors */
+  --search-snippet-user-message-bg: #0066cc;
+  --search-snippet-user-message-text: #ffffff;
+  --search-snippet-assistant-message-bg: #f1f3f5;
+  --search-snippet-assistant-message-text: #212529;
+  --search-snippet-system-message-bg: #fff3cd;
+  --search-snippet-system-message-text: #856404;
+  
+  /* Typography */
+  --search-snippet-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 
+                                'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 
+                                'Segoe UI Emoji', 'Segoe UI Symbol';
+  --search-snippet-font-family-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+  --search-snippet-font-size-base: 14px;
+  --search-snippet-font-size-sm: 12px;
+  --search-snippet-font-size-lg: 16px;
+  --search-snippet-font-size-xl: 18px;
+  --search-snippet-line-height: 1.5;
+  --search-snippet-font-weight-normal: 400;
+  --search-snippet-font-weight-medium: 500;
+  --search-snippet-font-weight-bold: 600;
+  
+  /* Spacing */
+  --search-snippet-spacing-xs: 4px;
+  --search-snippet-spacing-sm: 8px;
+  --search-snippet-spacing-md: 12px;
+  --search-snippet-spacing-lg: 16px;
+  --search-snippet-spacing-xl: 24px;
+  --search-snippet-spacing-xxl: 32px;
+  
+  /* Sizing */
+  --search-snippet-width: 100%;
+  --search-snippet-max-width: 100%;
+  --search-snippet-min-width: 320px;
+  --search-snippet-max-height: 600px;
+  --search-snippet-input-height: 44px;
+  --search-snippet-button-height: 36px;
+  --search-snippet-icon-size: 20px;
+  
+  /* Border */
+  --search-snippet-border-width: 1px;
+  --search-snippet-border-radius: 18px;
+  
+  /* Shadows */
+  --search-snippet-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --search-snippet-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  --search-snippet-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
+  --search-snippet-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);
+  --search-snippet-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+  
+  /* Animation */
+  --search-snippet-transition-fast: 150ms ease;
+  --search-snippet-transition: 200ms ease;
+  --search-snippet-transition-slow: 300ms ease;
+  --search-snippet-animation-duration: 0.2s;
+  
+  /* Z-index */
+  --search-snippet-z-dropdown: 1000;
+  --search-snippet-z-modal: 1050;
+  --search-snippet-z-popover: 1060;
+  --search-snippet-z-tooltip: 1070;
+  
+  /* Layout */
+  display: block;
+  width: var(--search-snippet-width);
+  max-width: var(--search-snippet-max-width);
+  min-width: var(--search-snippet-min-width);
+  font-family: var(--search-snippet-font-family);
+  font-size: var(--search-snippet-font-size-base);
+  line-height: var(--search-snippet-line-height);
+  color: var(--search-snippet-text-color);
+
+
+  /* Search */
+  --search-snippet-icon-size: 20px;
+  --search-snippet-icon-margin-left: 6px;
+  --search-snippet-result-item-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+
+  /* Chat Bubble */
+  --chat-bubble-button-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+  --chat-bubble-window-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+  --chat-bubble-button-size: 60px;
+  --chat-bubble-button-radius: 50%;
+  --chat-bubble-button-icon-size: 28px;
+  --chat-bubble-button-icon-color: white;
+  --chat-bubble-button-bottom: 20px;
+  --chat-bubble-button-right: 20px;
+  --chat-bubble-button-z-index: 9999;
+  --chat-bubble-position: fixed;
+
+
+}
+
+:host(:not([theme="dark"])) {
+  /* Colors - Light Mode */
+  --search-snippet-primary-color: #2563eb;
+  --search-snippet-primary-hover: #0f51dfff;
+  --search-snippet-background: #ffffff;
+  --search-snippet-surface: #f8f9fa;
+  --search-snippet-text-color: #212529;
+  --search-snippet-text-secondary: #6c757d;
+  --search-snippet-border-color: #dee2e6;
+  --search-snippet-hover-background: #f1f3f5;
+  --search-snippet-focus-ring: #0066cc40;
+  --search-snippet-error-color: #dc3545;
+  --search-snippet-error-background: #f8d7da;
+  --search-snippet-success-color: #28a745;
+  --search-snippet-success-background: #d4edda;
+  --search-snippet-warning-color: #ffc107;
+  --search-snippet-warning-background: #fff3cd;
+  
+  /* Message Colors */
+  --search-snippet-user-message-bg: #0066cc;
+  --search-snippet-user-message-text: #ffffff;
+  --search-snippet-assistant-message-bg: #f1f3f5;
+  --search-snippet-assistant-message-text: #212529;
+  --search-snippet-system-message-bg: #fff3cd;
+  --search-snippet-system-message-text: #856404;
+}
+
+/* Dark Mode */
+@media (prefers-color-scheme: dark) {
+  :host(:not([theme="light"])) {
+    --search-snippet-primary-color: #2563eb;
+    --search-snippet-primary-hover: #0f51dfff;
+    --search-snippet-background: #1a1b1e;
+    --search-snippet-surface: #25262b;
+    --search-snippet-text-color: #c1c2c5;
+    --search-snippet-text-secondary: #909296;
+    --search-snippet-border-color: #373a40;
+    --search-snippet-hover-background: #2c2e33;
+    --search-snippet-focus-ring: #4dabf740;
+    --search-snippet-error-color: #ff6b6b;
+    --search-snippet-error-background: #3d1f1f;
+    --search-snippet-success-color: #51cf66;
+    --search-snippet-success-background: #1f3d24;
+    --search-snippet-warning-color: #ffd43b;
+    --search-snippet-warning-background: #3d3419;
+    
+    --search-snippet-user-message-bg: #4dabf7;
+    --search-snippet-user-message-text: #1a1b1e;
+    --search-snippet-assistant-message-bg: #2c2e33;
+    --search-snippet-assistant-message-text: #c1c2c5;
+    --search-snippet-system-message-bg: #3d3419;
+    --search-snippet-system-message-text: #ffd43b;
+    color-scheme: dark;
+  }
+}
+
+/* Auto theme support */
+:host([theme="light"]) {
+  color-scheme: light;
+}
+
+
+/* Base reset */
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+/* Container */
+.container {
+  background: var(--search-snippet-background);
+  border: var(--search-snippet-border-width) solid var(--search-snippet-border-color);
+  border-radius: var(--search-snippet-border-radius);
+  box-shadow: var(--search-snippet-shadow);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Header */
+.header {
+  padding: var(--search-snippet-spacing-md);
+  border-bottom: var(--search-snippet-border-width) solid var(--search-snippet-border-color);
+  background: var(--search-snippet-surface);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--search-snippet-spacing-md);
+}
+
+.header-title {
+  font-size: var(--search-snippet-font-size-lg);
+  font-weight: var(--search-snippet-font-weight-bold);
+  color: var(--search-snippet-text-color);
+}
+
+/* Input */
+.input-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--search-snippet-spacing-sm);
+}
+
+.input {
+  width: 100%;
+  height: var(--search-snippet-input-height);
+  padding: var(--search-snippet-spacing-sm) var(--search-snippet-spacing-md);
+  font-family: var(--search-snippet-font-family);
+  font-size: var(--search-snippet-font-size-base);
+  line-height: var(--search-snippet-line-height);
+  color: var(--search-snippet-text-color);
+  background: var(--search-snippet-background);
+  border: var(--search-snippet-border-width) solid var(--search-snippet-border-color);
+  border-radius: var(--search-snippet-border-radius);
+  outline: none;
+  transition: var(--search-snippet-transition);
+}
+
+.input:focus {
+  border-color: var(--search-snippet-primary-color);
+  box-shadow: 0 0 0 3px var(--search-snippet-focus-ring);
+}
+
+.input::placeholder {
+  color: var(--search-snippet-text-secondary);
+}
+
+.input:disabled {
+  background: var(--search-snippet-surface);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+/* Button */
+.button {
+  height: var(--search-snippet-button-height);
+  padding: 0 var(--search-snippet-spacing-lg);
+  font-family: var(--search-snippet-font-family);
+  font-size: var(--search-snippet-font-size-base);
+  font-weight: var(--search-snippet-font-weight-medium);
+  color: #ffffff;
+  background: var(--search-snippet-primary-color);
+  border: none;
+  border-radius: var(--search-snippet-border-radius);
+  cursor: pointer;
+  outline: none;
+  transition: var(--search-snippet-transition);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--search-snippet-spacing-sm);
+  white-space: nowrap;
+}
+
+.button:hover:not(:disabled) {
+  background: var(--search-snippet-primary-hover);
+}
+
+.button:focus-visible {
+  box-shadow: 0 0 0 3px var(--search-snippet-focus-ring);
+}
+
+.button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.button-secondary {
+  background: var(--search-snippet-surface);
+  color: var(--search-snippet-text-color);
+  border: var(--search-snippet-border-width) solid var(--search-snippet-border-color);
+}
+
+.button-secondary:hover:not(:disabled) {
+  background: var(--search-snippet-hover-background);
+}
+
+/* Content area */
+.content {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: var(--search-snippet-spacing-md);
+}
+
+/* Scrollbar styling */
+.content::-webkit-scrollbar {
+  width: 8px;
+}
+
+.content::-webkit-scrollbar-track {
+  background: var(--search-snippet-surface);
+}
+
+.content::-webkit-scrollbar-thumb {
+  background: var(--search-snippet-border-color);
+  border-radius: var(--search-snippet-border-radius);
+}
+
+.content::-webkit-scrollbar-thumb:hover {
+  background: var(--search-snippet-text-secondary);
+}
+
+/* Loading spinner */
+.loading {
+  display: inline-block;
+  width: var(--search-snippet-icon-size);
+  height: var(--search-snippet-icon-size);
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Error message */
+.error {
+  padding: var(--search-snippet-spacing-md);
+  color: var(--search-snippet-error-color);
+  background: var(--search-snippet-error-background);
+  border-radius: var(--search-snippet-border-radius);
+  font-size: var(--search-snippet-font-size-sm);
+}
+
+/* Empty state */
+.empty {
+  padding: var(--search-snippet-spacing-xl);
+  text-align: center;
+  color: var(--search-snippet-text-secondary);
+}
+
+/* Accessibility */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+/* Focus visible polyfill */
+.focus-visible:focus {
+  outline: 2px solid var(--search-snippet-primary-color);
+  outline-offset: 2px;
+}
+
+/* Powered by branding - block style (for sidebars) */
+.powered-by {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--search-snippet-spacing-xs);
+  padding: var(--search-snippet-spacing-sm) var(--search-snippet-spacing-md);
+  font-size: var(--search-snippet-font-size-sm);
+  color: var(--search-snippet-text-secondary);
+  background: var(--search-snippet-surface);
+  border-top: var(--search-snippet-border-width) solid var(--search-snippet-border-color);
+  margin-top: auto;
+  flex-shrink: 0;
+}
+
+.powered-by svg {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+.powered-by a,
+.powered-by-inline a {
+  color: var(--search-snippet-text-secondary);
+  text-decoration: none;
+  transition: color var(--search-snippet-transition-fast);
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.powered-by a:hover,
+.powered-by-inline a:hover {
+  color: var(--search-snippet-primary-color);
+}
+
+/* Powered by branding - inline style (for headers/subtle placement) */
+.powered-by-inline {
+  font-size: var(--search-snippet-font-size-sm);
+  color: var(--search-snippet-text-secondary);
+  padding: var(--search-snippet-spacing-xs) 0;
+  text-align: center;
+}
+`,C=`Powered by <a href="https://search.ai.cloudflare.com" target="_blank" rel="noopener noreferrer">Cloudflare AI Search <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></a>`;function O(o){let i=o;i=V(i),i=i.replace(/```([\s\S]*?)```/g,(n,c)=>`<pre><code>${c.trim()}</code></pre>`);const e=i.split(`
+`),t=[];let s=!1,r="";for(let n=0;n<e.length;n++){const c=e[n],h=c.match(/^(#{1,6})\s+(.+)$/);if(h){const m=h[1].length,E=h[2];t.push(`<h${m}>${f(E)}</h${m}>`);continue}if(c.match(/^---+$/)){t.push("<hr />");continue}if(c.match(/^>\s+/)){const m=c.replace(/^>\s+/,"");t.push(`<blockquote>${f(m)}</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>`);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>`);continue}if(s&&(t.push(`</${r}>`),s=!1,r=""),c.trim()===""){t.push("<br />");continue}t.push(`<p>${f(c)}</p>`)}return s&&t.push(`</${r}>`),t.join(`
+`)}function f(o){let i=o;return i=i.replace(/`([^`]+)`/g,"<code>$1</code>"),i=i.replace(/\*\*\*(.+?)\*\*\*/g,"<strong><em>$1</em></strong>"),i=i.replace(/___(.+?)___/g,"<strong><em>$1</em></strong>"),i=i.replace(/\*\*(.+?)\*\*/g,"<strong>$1</strong>"),i=i.replace(/__(.+?)__/g,"<strong>$1</strong>"),i=i.replace(/\*(.+?)\*/g,"<em>$1</em>"),i=i.replace(/_(.+?)_/g,"<em>$1</em>"),i=i.replace(/\[([^\]]+)\]\(([^)]+)\)/g,'<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>'),i}function V(o){const i={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"};return o.replace(/[&<>"']/g,e=>i[e]||e)}class T{constructor(i,e,t){a(this,"container");a(this,"client");a(this,"props");a(this,"inputElement",null);a(this,"messagesContainer",null);a(this,"sendButton",null);a(this,"messages",[]);a(this,"isStreaming",!1);a(this,"currentStreamingMessageId",null);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()}render(){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>
+        </div>
+        <div class="chat-input-area">
+          <div class="chat-input-wrapper">
+            <textarea
+              class="chat-input"
+              placeholder="${l(this.props.placeholder||"Type a message...")}"
+              aria-label="Chat message input"
+              style="height: 40px;"
+              rows="1"
+            ></textarea>
+            <button class="button chat-send-button" aria-label="Send message">
+              <span>Send</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")}attachEventListeners(){!this.inputElement||!this.sendButton||(this.handleInputResize=i=>{const e=i.target;e.style.height="auto",e.style.height=`${e.scrollHeight}px`},this.inputElement.addEventListener("input",this.handleInputResize),this.handleInputKeydown=i=>{i.key==="Enter"&&!i.shiftKey&&(i.preventDefault(),this.handleSendMessage())},this.inputElement.addEventListener("keydown",this.handleInputKeydown),this.handleSendClick=()=>{this.handleSendMessage()},this.sendButton.addEventListener("click",this.handleSendClick))}async handleSendMessage(){if(!this.inputElement||this.isStreaming)return;const i=this.inputElement.value.trim();i.length!==0&&(this.inputElement.value="",this.inputElement.style.height="auto",await this.sendMessage(i))}async sendMessage(i){const e={id:M("msg"),role:"user",content:i,timestamp:Date.now()};this.addMessage(e),this.renderMessages(!0),this.setStreamingState(!0);const t=M("msg"),s={id:t,role:"assistant",content:"",timestamp:Date.now()};this.addMessage(s),this.currentStreamingMessageId=t,this.renderMessages(!0);try{const r=this.client.chat(i);let n="";for await(const h of r)if(h.type==="text"&&h.message)n+=h.message,this.updateStreamingMessage(t,n);else if(h.type==="error"){this.showErrorInMessage(t,h.message||"Unknown error");break}const c=this.messages.findIndex(h=>h.id===t);c!==-1&&(this.messages[c].content=n),this.container.dispatchEvent(v("message",{message:s}))}catch(r){this.showErrorInMessage(t,r.message),this.container.dispatchEvent(v("error",{error:{message:r.message,code:"CHAT_ERROR"}}))}finally{this.setStreamingState(!1),this.renderMessages(),this.currentStreamingMessageId=null}}addMessage(i){this.messages.push(i),this.renderMessages()}updateStreamingMessage(i,e){const t=this.messages.findIndex(s=>s.id===i);t!==-1&&(this.messages[t].content=e,this.renderMessages(!0))}showErrorInMessage(i,e){const t=this.messages.findIndex(s=>s.id===i);t!==-1&&(this.messages[t].content=`Error: ${e}`,this.renderMessages())}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>
+      `;return}const e=this.messages.map(t=>this.renderMessage(t,i&&t.id===this.currentStreamingMessageId)).join("");this.messagesContainer.innerHTML=e,this.scrollToBottom()}renderMessage(i,e=!1){const t=`chat-message-${i.role}`,s=i.role==="user"?"U":"AI";return`
+      <div class="chat-message ${t}">
+        <div class="chat-message-avatar">${s}</div>
+        <div class="chat-message-content">
+          <div class="chat-message-bubble">
+            ${i.content?`<div class="chat-message-text">${O(i.content)}</div>`:""}
+            ${e?'<div class="chat-streaming"><span class="chat-streaming-dot"></span><span class="chat-streaming-dot"></span><span class="chat-streaming-dot"></span></div>':""}
+          </div>
+          <div class="chat-message-metadata">
+            <span class="chat-message-time">${P(i.timestamp)}</span>
+          </div>
+        </div>
+      </div>
+    `}scrollToBottom(){this.messagesContainer&&requestAnimationFrame(()=>{this.messagesContainer&&(this.messagesContainer.scrollTop=this.messagesContainer.scrollHeight)})}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>")}getMessages(){return[...this.messages]}clearMessages(){this.messages=[],this.renderMessages()}setMessages(i){this.messages=[...i],this.renderMessages()}destroy(){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 $="chat-bubble-snippet";class B extends HTMLElement{constructor(){super();a(this,"shadow");a(this,"client",null);a(this,"chatView",null);a(this,"container",null);a(this,"isExpanded",!1);a(this,"isMinimized",!1);a(this,"handleBubbleClick",null);a(this,"handleCloseClick",null);a(this,"handleMinimizeClick",null);a(this,"handleClearClick",null);this.shadow=this.attachShadow({mode:"open"})}static get observedAttributes(){return["api-url","placeholder","theme","hide-branding"]}connectedCallback(){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))}getProps(){return{apiUrl:g(this.getAttribute("api-url"),"http://localhost:3000"),placeholder:g(this.getAttribute("placeholder"),"Type a message..."),theme:g(this.getAttribute("theme"),"auto"),hideBranding:w(this.getAttribute("hide-branding"),!1)}}initializeClient(){const e=this.getProps();if(!e.apiUrl){console.error("ChatBubbleSnippet: api-url attribute is required");return}try{this.client=x(e.apiUrl)}catch(t){console.error("ChatBubbleSnippet:",t)}}render(){const e=document.createElement("style");e.textContent=`${k}
+${I}
+${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(){return`
+      .chat-bubble-widget {
+        position: var(--chat-bubble-position);
+        bottom: var(--chat-bubble-button-bottom);
+        right: var(--chat-bubble-button-right);
+        z-index: var(--chat-bubble-button-z-index);
+        font-family: var(--search-snippet-font-family);
+        font-size: var(--search-snippet-font-size-base);
+      }
+
+      .bubble-button {
+        width: var(--chat-bubble-button-size);
+        height: var(--chat-bubble-button-size);
+        border-radius: var(--chat-bubble-button-radius);
+        background: var(--search-snippet-primary-color);
+        border: none;
+        cursor: pointer;
+        box-shadow: var(--chat-bubble-button-shadow);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.3s ease;
+        position: relative;
+      }
+
+      .bubble-button:hover {
+        background: var(--search-snippet-primary-hover);
+        transform: scale(1.05);
+      }
+
+      .bubble-button svg {
+        width: var(--chat-bubble-button-icon-size);
+        height: var(--chat-bubble-button-icon-size);
+        color: var(--chat-bubble-button-icon-color);
+      }
+
+      .bubble-button.hidden {
+        opacity: 0;
+        pointer-events: none;
+        transform: scale(0);
+      }
+
+      .chat-window {
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        width: 380px;
+        height: 500px;
+        background: var(--search-snippet-background);
+        border-radius: var(--search-snippet-border-radius);
+        box-shadow: var(--chat-bubble-window-shadow);
+        display: flex;
+        flex-direction: column;
+        opacity: 0;
+        transform: scale(0.8) translateY(20px);
+        transform-origin: bottom right;
+        transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+        pointer-events: none;
+        overflow: hidden;
+        border: var(--search-snippet-border-width) solid var(--search-snippet-border-color);
+      }
+
+      .chat-window.expanded {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+        pointer-events: auto;
+      }
+
+      .chat-window.minimized {
+        height: 58px;
+        overflow: hidden;
+      }
+
+      .chat-header {
+        background: var(--search-snippet-surface);
+        padding: var(--search-snippet-spacing-md);
+        border-bottom: var(--search-snippet-border-width) solid var(--search-snippet-border-color);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        flex-shrink: 0;
+      }
+
+      .chat-header-title {
+        font-weight: var(--search-snippet-font-weight-bold);
+        color: var(--search-snippet-text-color);
+        display: flex;
+        align-items: center;
+        gap: var(--search-snippet-spacing-sm);
+        font-size: var(--search-snippet-font-size-lg);
+      }
+
+      .chat-header-title svg {
+        width: 20px;
+        height: 20px;
+      }
+
+      .chat-header-actions {
+        display: flex;
+        gap: var(--search-snippet-spacing-xs);
+      }
+
+      .icon-button {
+        width: 32px;
+        height: 32px;
+        border: none;
+        background: transparent;
+        border-radius: var(--search-snippet-border-radius);
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: background var(--search-snippet-transition-fast);
+        color: var(--search-snippet-text-color);
+      }
+
+      .icon-button:hover {
+        background: var(--search-snippet-hover-background);
+      }
+
+      .icon-button svg {
+        width: 18px;
+        height: 18px;
+      }
+
+      .chat-content {
+        flex: 1;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+      }
+
+      @media (max-width: 480px) {
+        .chat-window {
+          width: calc(100vw - 40px);
+          max-width: 400px;
+        }
+      }
+    `}getBaseHTML(){return`
+      <button class="bubble-button" aria-label="Open chat">
+        <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>
+      </button>
+      <div class="chat-window">
+        <div class="chat-header">
+          <div class="chat-header-title">
+            <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>
+          </div>
+          <div class="chat-header-actions">
+            <button class="icon-button clear-button" aria-label="Clear history">
+              <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">
+              <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">
+              <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>
+              </svg>
+            </button>
+          </div>
+        </div>
+        <div class="chat-content"></div>
+        ${this.getProps().hideBranding?"":`<div class="powered-by">${C}</div>`}
+      </div>
+    `}attachEventListeners(){const e=this.shadow.querySelector(".bubble-button"),t=this.shadow.querySelector(".close-button"),s=this.shadow.querySelector(".minimize-button"),r=this.shadow.querySelector(".clear-button");this.handleBubbleClick=()=>this.toggleChat(),this.handleCloseClick=()=>this.closeChat(),this.handleMinimizeClick=()=>this.toggleMinimize(),this.handleClearClick=()=>this.clearChat(),e?.addEventListener("click",this.handleBubbleClick),t?.addEventListener("click",this.handleCloseClick),s?.addEventListener("click",this.handleMinimizeClick),r?.addEventListener("click",this.handleClearClick)}removeEventListeners(){const e=this.shadow.querySelector(".bubble-button"),t=this.shadow.querySelector(".close-button"),s=this.shadow.querySelector(".minimize-button"),r=this.shadow.querySelector(".clear-button");this.handleBubbleClick&&e?.removeEventListener("click",this.handleBubbleClick),this.handleCloseClick&&t?.removeEventListener("click",this.handleCloseClick),this.handleMinimizeClick&&s?.removeEventListener("click",this.handleMinimizeClick),this.handleClearClick&&r?.removeEventListener("click",this.handleClearClick),this.handleBubbleClick=null,this.handleCloseClick=null,this.handleMinimizeClick=null,this.handleClearClick=null}toggleChat(){this.isExpanded=!this.isExpanded;const e=this.shadow.querySelector(".bubble-button"),t=this.shadow.querySelector(".chat-window");this.isExpanded?(e?.classList.add("hidden"),t?.classList.add("expanded"),this.initializeChatView()):(e?.classList.remove("hidden"),t?.classList.remove("expanded"))}closeChat(){this.isExpanded=!1,this.isMinimized=!1;const e=this.shadow.querySelector(".bubble-button"),t=this.shadow.querySelector(".chat-window");e?.classList.remove("hidden"),t?.classList.remove("expanded","minimized")}toggleMinimize(){this.isMinimized=!this.isMinimized;const e=this.shadow.querySelector(".chat-window");this.isMinimized?e?.classList.add("minimized"):e?.classList.remove("minimized")}initializeChatView(){if(this.chatView||!this.client)return;const e=this.shadow.querySelector(".chat-content");if(!e)return;const t=this.getProps();this.chatView=new T(e,this.client,t)}updateTheme(e){(e==="light"||e==="dark"?e:null)===null&&this.hasAttribute("theme")&&this.getAttribute("theme")!=="auto"&&this.removeAttribute("theme")}cleanup(){this.removeEventListeners(),this.client&&this.client.cancelAllRequests(),this.chatView&&this.chatView.destroy()}clearChat(){this.chatView?.clearMessages()}async sendMessage(e){this.chatView&&await this.chatView.sendMessage(e)}getMessages(){return this.chatView?.getMessages()||[]}}customElements.get($)||customElements.define($,B);const q="chat-page-snippet",A="chat-page-sessions";class R extends HTMLElement{constructor(){super();a(this,"shadow");a(this,"client",null);a(this,"chatView",null);a(this,"container",null);a(this,"sessions",[]);a(this,"currentSessionId",null);a(this,"sidebarCollapsed",!1);a(this,"handleClearClick",null);a(this,"handleNewChatClick",null);a(this,"handleToggleSidebarClick",null);a(this,"handleChatListClick",null);a(this,"handleMessageEvent",null);this.shadow=this.attachShadow({mode:"open"}),this.loadSessions()}static get observedAttributes(){return["api-url","placeholder","theme","hide-branding"]}connectedCallback(){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))}getProps(){return{apiUrl:g(this.getAttribute("api-url"),"http://localhost:3000"),placeholder:g(this.getAttribute("placeholder"),"Type a message..."),theme:g(this.getAttribute("theme"),"auto"),hideBranding:w(this.getAttribute("hide-branding"),!1)}}initializeClient(){const e=this.getProps();if(!e.apiUrl){console.error("ChatPageSnippet: api-url attribute is required");return}try{this.client=x(e.apiUrl)}catch(t){console.error("ChatPageSnippet:",t)}}render(){const e=document.createElement("style");e.textContent=`${k}
+${I}
+${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(){return`
+      :host {
+        display: block;
+        width: 100%;
+        height: 100vh;
+      }
+
+      .chat-page-container {
+        display: flex;
+        height: 100%;
+        background: var(--search-snippet-background);
+      }
+
+      /* Sidebar styles */
+      .chat-sidebar {
+        width: 280px;
+        min-width: 280px;
+        background: var(--search-snippet-surface);
+        border-right: var(--search-snippet-border-width) solid var(--search-snippet-border-color);
+        display: flex;
+        flex-direction: column;
+        transition: var(--search-snippet-transition);
+        overflow: hidden;
+      }
+
+      .chat-sidebar.collapsed {
+        width: 0;
+        min-width: 0;
+        border-right: none;
+      }
+
+      .sidebar-header {
+        padding: var(--search-snippet-spacing-lg);
+        border-bottom: var(--search-snippet-border-width) solid var(--search-snippet-border-color);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        flex-shrink: 0;
+        height: 69px;
+      }
+
+      .sidebar-title {
+        font-size: var(--search-snippet-font-size-lg);
+        font-weight: var(--search-snippet-font-weight-bold);
+        color: var(--search-snippet-text-color);
+      }
+
+      .new-chat-button {
+        width: 100%;
+        height: var(--search-snippet-button-height);
+        margin: var(--search-snippet-spacing-md) var(--search-snippet-spacing-lg);
+        padding: 0 var(--search-snippet-spacing-lg);
+        font-family: var(--search-snippet-font-family);
+        font-size: var(--search-snippet-font-size-base);
+        font-weight: var(--search-snippet-font-weight-medium);
+        color: #fff;
+        background: var(--search-snippet-primary-color);
+        border: none;
+        border-radius: var(--search-snippet-border-radius);
+        cursor: pointer;
+        outline: none;
+        transition: var(--search-snippet-transition);
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: var(--search-snippet-spacing-sm);
+        box-sizing: border-box;
+        width: calc(100% - var(--search-snippet-spacing-lg) * 2);
+      }
+
+      .new-chat-button:hover {
+        opacity: 0.9;
+      }
+
+      .new-chat-button svg {
+        width: 16px;
+        height: 16px;
+      }
+
+      .chat-list {
+        flex: 1;
+        overflow-y: auto;
+        padding: var(--search-snippet-spacing-sm);
+      }
+
+      .chat-list-item {
+        display: flex;
+        align-items: center;
+        padding: var(--search-snippet-spacing-md) var(--search-snippet-spacing-lg);
+        margin-bottom: var(--search-snippet-spacing-xs);
+        border-radius: var(--search-snippet-border-radius);
+        cursor: pointer;
+        transition: var(--search-snippet-transition);
+        gap: var(--search-snippet-spacing-sm);
+      }
+
+      .chat-list-item:hover {
+        background: var(--search-snippet-hover-background);
+      }
+
+      .chat-list-item.active {
+        background: var(--search-snippet-hover-background);
+        border: var(--search-snippet-border-width) solid var(--search-snippet-border-color);
+      }
+
+      .chat-list-item-content {
+        flex: 1;
+        min-width: 0;
+      }
+
+      .chat-list-item-title {
+        font-size: var(--search-snippet-font-size-base);
+        font-weight: var(--search-snippet-font-weight-medium);
+        color: var(--search-snippet-text-color);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .chat-list-item-date {
+        font-size: var(--search-snippet-font-size-sm);
+        color: var(--search-snippet-text-secondary);
+        margin-top: 2px;
+      }
+
+      .chat-list-item-delete {
+        opacity: 0;
+        background: none;
+        border: none;
+        padding: var(--search-snippet-spacing-xs);
+        cursor: pointer;
+        color: var(--search-snippet-text-secondary);
+        border-radius: var(--search-snippet-border-radius-sm);
+        transition: var(--search-snippet-transition);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .chat-list-item:hover .chat-list-item-delete {
+        opacity: 1;
+      }
+
+      .chat-list-item-delete:hover {
+        background: var(--search-snippet-error-background, rgba(239, 68, 68, 0.1));
+        color: var(--search-snippet-error-color, #ef4444);
+      }
+
+      .chat-list-item-delete svg {
+        width: 14px;
+        height: 14px;
+      }
+
+      .chat-list-empty {
+        padding: var(--search-snippet-spacing-xl);
+        text-align: center;
+        color: var(--search-snippet-text-secondary);
+        font-size: var(--search-snippet-font-size-sm);
+      }
+
+      /* Main content area */
+      .chat-main {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        min-width: 0;
+      }
+
+      .chat-page-header {
+        background: var(--search-snippet-surface);
+        padding: var(--search-snippet-spacing-lg);
+        border-bottom: var(--search-snippet-border-width) solid var(--search-snippet-border-color);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        flex-shrink: 0;
+      }
+
+      .chat-page-header-left {
+        display: flex;
+        align-items: center;
+        gap: var(--search-snippet-spacing-md);
+      }
+
+      .toggle-sidebar-button {
+        width: 36px;
+        height: 36px;
+        padding: 0;
+        font-family: var(--search-snippet-font-family);
+        color: var(--search-snippet-text-color);
+        background: var(--search-snippet-background);
+        border: var(--search-snippet-border-width) solid var(--search-snippet-border-color);
+        border-radius: var(--search-snippet-border-radius);
+        cursor: pointer;
+        outline: none;
+        transition: var(--search-snippet-transition);
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .toggle-sidebar-button:hover {
+        background: var(--search-snippet-hover-background);
+      }
+
+      .toggle-sidebar-button svg {
+        width: 18px;
+        height: 18px;
+      }
+
+      .chat-page-header-title {
+        font-size: var(--search-snippet-font-size-xl);
+        font-weight: var(--search-snippet-font-weight-bold);
+        color: var(--search-snippet-text-color);
+        display: flex;
+        align-items: center;
+        gap: var(--search-snippet-spacing-md);
+      }
+
+      .chat-page-header-title svg {
+        width: 28px;
+        height: 28px;
+      }
+
+      .chat-page-header-actions {
+        display: flex;
+        gap: var(--search-snippet-spacing-sm);
+      }
+
+      .header-button {
+        height: var(--search-snippet-button-height);
+        padding: 0 var(--search-snippet-spacing-lg);
+        font-family: var(--search-snippet-font-family);
+        font-size: var(--search-snippet-font-size-base);
+        font-weight: var(--search-snippet-font-weight-medium);
+        color: var(--search-snippet-text-color);
+        background: var(--search-snippet-background);
+        border: var(--search-snippet-border-width) solid var(--search-snippet-border-color);
+        border-radius: var(--search-snippet-border-radius);
+        cursor: pointer;
+        outline: none;
+        transition: var(--search-snippet-transition);
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: var(--search-snippet-spacing-sm);
+      }
+
+      .header-button:hover {
+        background: var(--search-snippet-hover-background);
+      }
+
+      .header-button svg {
+        width: 16px;
+        height: 16px;
+      }
+
+      .chat-page-content {
+        flex: 1;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+      }
+
+      .container {
+        border: none;
+        box-shadow: none;
+        height: 100%;
+        width: 100%;
+        background: var(--search-snippet-background);
+        border-radius: 0;
+      }
+    `}getBaseHTML(){return`
+      <div class="chat-sidebar">
+        <div class="sidebar-header">
+          <span class="sidebar-title">History</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
+        </button>
+        <div class="chat-list"></div>
+        ${this.getProps().hideBranding?"":`<div class="powered-by">${C}</div>`}
+      </div>
+      <div class="chat-main">
+        <div class="chat-page-header">
+          <div class="chat-page-header-left">
+            <button class="toggle-sidebar-button" title="Toggle sidebar">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M3 12h18M3 6h18M3 18h18"></path>
+              </svg>
+            </button>
+            <div class="chat-page-header-title">
+              <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>
+            </div>
+          </div>
+          <div class="chat-page-header-actions">
+            <button class="header-button clear-button">
+              <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
+            </button>
+          </div>
+        </div>
+        <div class="chat-page-content">
+          <div class="container"></div>
+        </div>
+      </div>
+    `}attachEventListeners(){const e=this.shadow.querySelector(".clear-button"),t=this.shadow.querySelector(".new-chat-button"),s=this.shadow.querySelector(".toggle-sidebar-button"),r=this.shadow.querySelector(".chat-list");this.handleClearClick=()=>this.clearCurrentChat(),this.handleNewChatClick=()=>this.createNewChat(),this.handleToggleSidebarClick=()=>this.toggleSidebar(),this.handleChatListClick=n=>this.onChatListClick(n),e?.addEventListener("click",this.handleClearClick),t?.addEventListener("click",this.handleNewChatClick),s?.addEventListener("click",this.handleToggleSidebarClick),r?.addEventListener("click",this.handleChatListClick)}removeEventListeners(){const e=this.shadow.querySelector(".clear-button"),t=this.shadow.querySelector(".new-chat-button"),s=this.shadow.querySelector(".toggle-sidebar-button"),r=this.shadow.querySelector(".chat-list"),n=this.shadow.querySelector(".container");this.handleClearClick&&e?.removeEventListener("click",this.handleClearClick),this.handleNewChatClick&&t?.removeEventListener("click",this.handleNewChatClick),this.handleToggleSidebarClick&&s?.removeEventListener("click",this.handleToggleSidebarClick),this.handleChatListClick&&r?.removeEventListener("click",this.handleChatListClick),this.handleMessageEvent&&n&&n.removeEventListener("message",this.handleMessageEvent),this.handleClearClick=null,this.handleNewChatClick=null,this.handleToggleSidebarClick=null,this.handleChatListClick=null,this.handleMessageEvent=null}setupView(){if(!this.client)return;const e=this.shadow.querySelector(".container");if(!e)return;const t=this.getProps();if(this.chatView=new T(e,this.client,t),this.sessions.length===0)this.createNewChat();else{const s=this.sessions[0];this.switchToSession(s.id)}this.handleMessageEvent=()=>{this.saveCurrentSession(),this.updateSessionTitle(),this.renderChatList()},e.addEventListener("message",this.handleMessageEvent),this.renderChatList()}generateSessionId(){return`session_${Date.now()}_${Math.random().toString(36).substring(2,9)}`}loadSessions(){try{const e=localStorage.getItem(A);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)}}saveSessions(){try{localStorage.setItem(A,JSON.stringify(this.sessions))}catch(e){console.error("Failed to save chat sessions:",e)}}saveCurrentSession(){if(!this.currentSessionId||!this.chatView)return;const e=this.sessions.findIndex(t=>t.id===this.currentSessionId);e!==-1&&(this.sessions[e].messages=this.chatView.getMessages(),this.sessions[e].updatedAt=Date.now(),this.saveSessions())}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())}}createNewChat(){this.saveCurrentSession();const e={id:this.generateSessionId(),title:"New Chat",messages:[],createdAt:Date.now(),updatedAt:Date.now()};this.sessions.unshift(e),this.currentSessionId=e.id,this.saveSessions(),this.chatView?.clearMessages(),this.renderChatList()}switchToSession(e){if(e===this.currentSessionId)return;this.saveCurrentSession();const t=this.sessions.find(s=>s.id===e);t&&this.chatView&&(this.currentSessionId=e,this.chatView.setMessages(t.messages),this.renderChatList())}deleteSession(e){const t=this.sessions.findIndex(s=>s.id===e);t!==-1&&(this.sessions.splice(t,1),this.saveSessions(),e===this.currentSessionId&&(this.sessions.length>0?this.switchToSession(this.sessions[0].id):this.createNewChat()),this.renderChatList())}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()}toggleSidebar(){this.sidebarCollapsed=!this.sidebarCollapsed,this.shadow.querySelector(".chat-sidebar")?.classList.toggle("collapsed",this.sidebarCollapsed)}onChatListClick(e){const t=e.target,s=t.closest(".chat-list-item-delete");if(s){e.stopPropagation();const n=s.getAttribute("data-session-id");n&&this.deleteSession(n);return}const r=t.closest(".chat-list-item");if(r){const n=r.getAttribute("data-session-id");n&&this.switchToSession(n)}}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("")}}renderChatListItem(e){const t=e.id===this.currentSessionId,s=this.formatDate(e.updatedAt);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">
+          <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>
+        </button>
+      </div>
+    `}formatDate(e){const t=new Date(e),r=new Date().getTime()-t.getTime(),n=Math.floor(r/(1e3*60*60*24));return n===0?t.toLocaleTimeString(void 0,{hour:"2-digit",minute:"2-digit"}):n===1?"Yesterday":n<7?t.toLocaleDateString(void 0,{weekday:"long"}):t.toLocaleDateString(void 0,{month:"short",day:"numeric"})}escapeHTML(e){const t=document.createElement("div");return t.textContent=e,t.innerHTML}updateTheme(e){(e==="light"||e==="dark"?e:null)===null&&this.hasAttribute("theme")&&this.getAttribute("theme")!=="auto"&&this.removeAttribute("theme")}cleanup(){this.removeEventListeners(),this.client&&this.client.cancelAllRequests(),this.chatView&&this.chatView.destroy()}clearChat(){this.clearCurrentChat()}async sendMessage(e){this.chatView&&(await this.chatView.sendMessage(e),this.saveCurrentSession())}getMessages(){return this.chatView?.getMessages()||[]}getSessions(){return[...this.sessions]}getCurrentSession(){return this.sessions.find(e=>e.id===this.currentSessionId)||null}}customElements.get(q)||customElements.define(q,R);const K=`
+/* Search view states */
+.search-view {
+  transition: var(--search-snippet-transition-slow);
+  background: var(--search-snippet-background);
+  border-radius: var(--search-snippet-border-radius);
+  padding: 0px;
+}
+
+.search-view-collapsed {
+  max-height: 60px;
+}
+
+.search-view-expanded {
+  max-height: var(--search-snippet-max-height);
+}
+
+
+.search-icon {
+  width: var(--search-snippet-icon-size);
+  height: var(--search-snippet-icon-size);
+  margin-left: var(--search-snippet-icon-margin-left);
+  color: var(--search-snippet-text-color);
+}
+
+/* Search input wrapper */
+.search-input-wrapper {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: var(--search-snippet-spacing-sm);
+  overflow: hidden;
+  transition: max-width var(--search-snippet-transition-slow), 
+              opacity var(--search-snippet-transition);
+  padding: var(--search-snippet-spacing-sm);
+  border-radius: var(--search-snippet-border-radius);
+  border: var(--search-snippet-border-width) solid var(--search-snippet-border-color);
+}
+
+
+
+.search-input {
+  flex: 1;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--search-snippet-text-color);
+  font-size: var(--search-snippet-font-size-base);
+  font-weight: var(--search-snippet-font-weight-medium);
+  box-shadow: none;
+  padding: 0;
+}
+
+.search-input::placeholder {
+  color: var(--search-snippet-text-secondary);
+}
+
+.search-view:has(.search-input:not(:placeholder-shown)) .search-input-wrapper, .search-view:has(.search-input:not(:placeholder-shown)) {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.search-view:focus-within {
+  border-color: var(--search-snippet-primary-color);
+  box-shadow: inset 0 0 0 3px var(--search-snippet-focus-ring);
+}
+
+.search-view:has(.search-input:not(:placeholder-shown)) .search-content {
+  max-height: 600px;
+  opacity: 1;
+  overflow-y: auto;
+  padding: 8px;
+}
+
+.search-submit-button {
+  flex-shrink: 0;
+  
+  border-radius: max(var(--search-snippet-button-min-border-radius, 4px), calc(var(--search-snippet-border-radius) - var(--search-snippet-spacing-sm)))
+}
+
+/* Search content */
+.search-content {
+  max-height: 0;
+  opacity: 0;
+  transition: max-height var(--search-snippet-transition-slow),
+              opacity var(--search-snippet-transition);
+  position: absolute;
+  width: 100%;
+  background: var(--search-snippet-background);
+  border-bottom-left-radius: var(--search-snippet-border-radius);
+  border-bottom-right-radius: var(--search-snippet-border-radius);
+  border: var(--search-snippet-border-width) solid var(--search-snippet-border-color);
+  border-top: none;
+}
+
+.search-content::-webkit-scrollbar {
+  width: 8px;
+  height: 100px;
+}
+
+.search-content::-webkit-scrollbar-track {
+  background: var(--search-snippet-surface);
+  
+}
+
+.search-content::-webkit-scrollbar-thumb {
+  background: var(--search-snippet-border-color);
+  border-radius: var(--search-snippet-border-radius);
+}
+
+.search-content::-webkit-scrollbar-thumb:hover {
+  background: var(--search-snippet-text-secondary);
+}
+
+.container {
+  overflow: unset;
+  position: relative;
+  border: none;
+}
+
+.container:has(.search-input:not(:placeholder-shown)) {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+
+/* Override header for search mode */
+
+/* Search results */
+.search-results {
+  display: flex;
+  flex-direction: column;
+  gap: var(--search-snippet-spacing-sm);
+}
+
+.search-result-item {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--search-snippet-spacing-md);
+  padding: var(--search-snippet-spacing-md);
+  background: var(--search-snippet-surface);
+  border: var(--search-snippet-border-width) solid var(--search-snippet-border-color);
+  border-radius: var(--search-snippet-border-radius);
+  cursor: pointer;
+  transition: var(--search-snippet-transition);
+}
+
+/* Image thumbnail container */
+.search-result-image-container {
+  flex-shrink: 0;
+  width: 64px;
+  height: 64px;
+  border-radius: calc(var(--search-snippet-border-radius) - 4px);
+  overflow: hidden;
+  background: var(--search-snippet-surface);
+  border: var(--search-snippet-border-width) solid var(--search-snippet-border-color);
+  position: relative;
+}
+
+.search-result-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0;
+  transition: opacity var(--search-snippet-transition);
+}
+
+.search-result-image.loaded {
+  opacity: 1;
+}
+
+/* Loading shimmer */
+.search-result-image-loading {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    90deg,
+    var(--search-snippet-surface) 25%,
+    var(--search-snippet-border-color) 50%,
+    var(--search-snippet-surface) 75%
+  );
+  background-size: 200% 100%;
+  animation: search-image-shimmer 1.5s infinite;
+}
+
+@keyframes search-image-shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+/* Placeholder icon */
+.search-result-image-placeholder {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--search-snippet-text-secondary);
+  opacity: 0.5;
+}
+
+.search-result-image-placeholder svg {
+  width: 24px;
+  height: 24px;
+}
+
+/* Content wrapper */
+.search-result-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.search-result-item:hover {
+  background: var(--search-snippet-hover-background);
+  border-color: var(--search-snippet-primary-color);
+  transform: translateY(-1px);
+  box-shadow: var(--search-snippet-result-item-shadow);
+}
+
+.search-result-item:focus-visible {
+  outline: 2px solid var(--search-snippet-primary-color);
+  outline-offset: 2px;
+}
+
+.search-result-title {
+  font-size: var(--search-snippet-font-size-base);
+  font-weight: var(--search-snippet-font-weight-medium);
+  color: var(--search-snippet-text-color);
+  margin-bottom: var(--search-snippet-spacing-xs);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.search-result-snippet {
+  font-size: var(--search-snippet-font-size-sm);
+  color: var(--search-snippet-text-secondary);
+  line-height: 1.6;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.search-result-url {
+  font-size: var(--search-snippet-font-size-sm);
+  color: var(--search-snippet-primary-color);
+  margin-top: var(--search-snippet-spacing-xs);
+  text-decoration: none;
+  display: inline-block;
+}
+
+.search-result-url:hover {
+  text-decoration: underline;
+}
+
+/* Search header */
+.search-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--search-snippet-spacing-md);
+  padding-bottom: var(--search-snippet-spacing-sm);
+  border-bottom: var(--search-snippet-border-width) solid var(--search-snippet-border-color);
+}
+
+.search-count {
+  font-size: var(--search-snippet-font-size-sm);
+  color: var(--search-snippet-text-secondary);
+}
+
+/* Search footer */
+.search-footer {
+  padding: var(--search-snippet-spacing-md);
+  border-top: var(--search-snippet-border-width) solid var(--search-snippet-border-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--search-snippet-spacing-sm);
+}
+
+/* Loading state for search */
+.search-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--search-snippet-spacing-xxl);
+  gap: var(--search-snippet-spacing-md);
+  color: var(--search-snippet-text-secondary);
+}
+
+/* Empty search state */
+.search-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--search-snippet-spacing-xxl);
+  gap: var(--search-snippet-spacing-md);
+  color: var(--search-snippet-text-secondary);
+  text-align: center;
+}
+
+.search-empty-icon {
+  width: 64px;
+  height: 64px;
+  opacity: 0.5;
+}
+
+.search-empty-title {
+  font-size: var(--search-snippet-font-size-lg);
+  font-weight: var(--search-snippet-font-weight-medium);
+  color: var(--search-snippet-text-color);
+}
+
+.search-empty-description {
+  font-size: var(--search-snippet-font-size-sm);
+}
+
+/* Highlight matching text */
+.search-highlight {
+  background: var(--search-snippet-warning-background);
+  color: var(--search-snippet-warning-color);
+  padding: 1px 2px;
+  border-radius: 2px;
+  font-weight: var(--search-snippet-font-weight-medium);
+}
+`,H="search-bar-snippet";class S extends HTMLElement{constructor(){super();a(this,"shadow");a(this,"client",null);a(this,"container",null);a(this,"inputElement",null);a(this,"resultsContainer",null);a(this,"searchButton",null);a(this,"isLoading",!1);a(this,"currentQuery","");a(this,"debouncedSearch",null);a(this,"handleInputChange",null);a(this,"handleInputKeydownEnter",null);a(this,"handleInputKeydownEscape",null);a(this,"handleSearchButtonClick",null);this.shadow=this.attachShadow({mode:"open"})}static get observedAttributes(){return["api-url","placeholder","max-results","debounce-ms","theme","hide-branding"]}connectedCallback(){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))}getProps(){return{apiUrl:g(this.getAttribute("api-url"),"http://localhost:3000"),placeholder:g(this.getAttribute("placeholder"),"Search..."),maxResults:y(this.getAttribute("max-results"),10),debounceMs:y(this.getAttribute("debounce-ms"),300),theme:g(this.getAttribute("theme"),"auto"),hideBranding:w(this.getAttribute("hide-branding"),!1)}}initializeClient(){const e=this.getProps();if(!e.apiUrl){console.error("SearchBarSnippet: api-url attribute is required");return}try{this.client=x(e.apiUrl)}catch(t){console.error("SearchBarSnippet:",t)}}render(){const e=this.getProps(),t=r=>this.performSearch(r);this.debouncedSearch=u(t,e.debounceMs||400);const s=document.createElement("style");s.textContent=`${k}
+${K}`,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>
+                    <input
+                        type="text"
+                        name="search-input"
+                        class="search-input"
+                        placeholder="${l(e.placeholder||"Search...")}"
+                        aria-label="Search input"
+                        autocomplete="off"
+                    />
+                    <button class="button search-submit-button" aria-label="Search">
+                        <span>Search</span>
+                    </button>
+                </div>
+                <div class="search-content">
+                    <div class="search-results-wrapper">
+                        <!-- Results will be inserted here -->
+                    </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()}attachEventListeners(){this.inputElement&&(this.handleInputChange=e=>{const s=e.target.value.trim();s.length>0&&this.debouncedSearch?this.debouncedSearch(s):this.showEmptyState()},this.inputElement.addEventListener("input",this.handleInputChange),this.handleInputKeydownEnter=e=>{if(e.key==="Enter"){const t=e.target.value.trim();t.length>0&&this.performSearch(t)}},this.inputElement.addEventListener("keydown",this.handleInputKeydownEnter),this.handleInputKeydownEscape=e=>{e.key==="Escape"&&this.inputElement&&(this.inputElement.value="")},window.addEventListener("keydown",this.handleInputKeydownEscape),this.searchButton&&(this.handleSearchButtonClick=()=>{const e=this.inputElement?.value.trim()||"";e.length>0&&this.performSearch(e)},this.searchButton.addEventListener("click",this.handleSearchButtonClick)))}async performSearch(e){if(!(this.isLoading||e===this.currentQuery||!this.client)){this.currentQuery=e,this.isLoading=!0,this.showLoadingState();try{const t=await this.client.search(e,{streaming:!1});this.displayResults(t,e)}catch(t){this.showErrorState(t.message)}finally{this.isLoading=!1}}}displayResults(e,t){if(!this.resultsContainer)return;if(e.length===0){this.showNoResultsState(t);return}const r=this.getProps().hideBranding?"":`<div class="powered-by-inline">${C}</div>`,n=`
+            <div class="search-header">
+                <div class="search-count">
+                    Found ${e.length} result${e.length===1?"":"s"}
+                </div>
+                ${r}
+            </div>
+            <div class="search-results">
+                ${e.map(c=>this.renderResult(c)).join("")}
+            </div>
+        `;this.resultsContainer.innerHTML=n,this.attachResultHandlers()}renderResult(e){const t=this.renderResultImage(e.image,e.title);return`
+            <div class="search-result-item" role="button" tabindex="0" data-result-id="${l(e.url||"")}">
+                ${t}
+                <div class="search-result-content">
+                    <div class="search-result-title">${l(e.title||"")}</div>
+                    <div class="search-result-snippet">${l(e.description||"")}</div>
+                    ${e.url?`<a href="${l(e.url)}" class="search-result-url">${l(e.url)}</a>`:""}
+                </div>
+            </div>
+        `}renderResultImage(e,t){const s='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>';return e?`
+      <div class="search-result-image-container">
+        <div class="search-result-image-loading"></div>
+        <div class="search-result-image-placeholder" style="display: none;">${s}</div>
+        <img 
+          class="search-result-image" 
+          src="${l(e)}" 
+          alt="${l(t)}"
+          loading="lazy"
+        />
+      </div>
+    `:`
+        <div class="search-result-image-container">
+          <div class="search-result-image-placeholder">${s}</div>
+        </div>
+      `}attachResultHandlers(){const e=this.container?.querySelectorAll(".search-result-item");if(!e)return;for(const s of e)s.addEventListener("click",()=>{const r=s.getAttribute("data-result-id");console.log("Result clicked:",r)}),s.addEventListener("keydown",r=>{(r.key==="Enter"||r.key===" ")&&s.click()});this.container?.querySelectorAll(".search-result-image")?.forEach(s=>{s.addEventListener("load",()=>{s.classList.add("loaded"),s.closest(".search-result-image-container")?.querySelector(".search-result-image-loading")?.remove()}),s.addEventListener("error",()=>{const r=s.closest(".search-result-image-container");r?.querySelector(".search-result-image-loading")?.remove();const n=r?.querySelector(".search-result-image-placeholder");n&&(n.style.display="flex"),s.style.display="none"})})}showLoadingState(){this.resultsContainer&&(this.resultsContainer.innerHTML=`
+            <div class="search-loading">
+                <div class="loading" aria-label="Loading"></div>
+                <div>Searching...</div>
+            </div>
+        `)}showEmptyState(){this.resultsContainer&&(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-description">
+                    Enter a query to search for results
+                </div>
+            </div>
+        `)}showNoResultsState(e){this.resultsContainer&&(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-description">
+                    No results found for "${l(e)}"
+                </div>
+            </div>
+        `)}showErrorState(e){this.resultsContainer&&(this.resultsContainer.innerHTML=`
+            <div class="error">
+                <strong>Error:</strong> ${l(e)}
+            </div>
+        `)}updateTheme(e){const t=e==="light"||e==="dark"||e==="auto"?e:"auto";t==="auto"?this.removeAttribute("theme"):this.setAttribute("theme",t)}cleanup(){this.client&&this.client.cancelAllRequests(),this.inputElement&&(this.handleInputChange&&this.inputElement.removeEventListener("input",this.handleInputChange),this.handleInputKeydownEnter&&this.inputElement.removeEventListener("keydown",this.handleInputKeydownEnter),this.handleInputKeydownEscape&&window.removeEventListener("keydown",this.handleInputKeydownEscape)),this.searchButton&&this.handleSearchButtonClick&&this.searchButton.removeEventListener("click",this.handleSearchButtonClick),this.handleInputChange=null,this.handleInputKeydownEnter=null,this.handleInputKeydownEscape=null,this.handleSearchButtonClick=null}async search(e){await this.performSearch(e)}}customElements.get(H)||customElements.define(H,S);const D=`
+/* Modal backdrop */
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+  z-index: var(--search-snippet-z-modal);
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity var(--search-snippet-transition), visibility var(--search-snippet-transition);
+}
+
+.modal-backdrop.open {
+  opacity: 1;
+  visibility: visible;
+}
+
+/* Modal container */
+.modal-container {
+  position: fixed;
+  top: 15%;
+  left: 50%;
+  transform: translateX(-50%) scale(0.95);
+  width: 90%;
+  max-width: 600px;
+  max-height: 70vh;
+  background: var(--search-snippet-background);
+  border: var(--search-snippet-border-width) solid var(--search-snippet-border-color);
+  border-radius: var(--search-snippet-border-radius);
+  box-shadow: var(--search-snippet-shadow-lg);
+  z-index: calc(var(--search-snippet-z-modal) + 1);
+  display: flex;
+  flex-direction: column;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity var(--search-snippet-transition), 
+              visibility var(--search-snippet-transition),
+              transform var(--search-snippet-transition);
+}
+
+.modal-container.open {
+  opacity: 1;
+  visibility: visible;
+  transform: translateX(-50%) scale(1);
+}
+
+/* Modal header with search input */
+.modal-header {
+  display: flex;
+  align-items: center;
+  gap: var(--search-snippet-spacing-sm);
+  padding: var(--search-snippet-spacing-md);
+  border-bottom: var(--search-snippet-border-width) solid var(--search-snippet-border-color);
+}
+
+.modal-search-icon {
+  width: var(--search-snippet-icon-size);
+  height: var(--search-snippet-icon-size);
+  color: var(--search-snippet-text-secondary);
+  flex-shrink: 0;
+}
+
+.modal-search-input {
+  flex: 1;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--search-snippet-text-color);
+  font-size: var(--search-snippet-font-size-lg);
+  font-family: var(--search-snippet-font-family);
+  font-weight: var(--search-snippet-font-weight-normal);
+  padding: var(--search-snippet-spacing-xs) 0;
+}
+
+.modal-search-input::placeholder {
+  color: var(--search-snippet-text-secondary);
+}
+
+.modal-shortcut-hint {
+  display: flex;
+  align-items: center;
+  gap: var(--search-snippet-spacing-xs);
+  color: var(--search-snippet-text-secondary);
+  font-size: var(--search-snippet-font-size-sm);
+  flex-shrink: 0;
+}
+
+.modal-kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 24px;
+  height: 22px;
+  padding: 0 var(--search-snippet-spacing-xs);
+  background: var(--search-snippet-surface);
+  border: var(--search-snippet-border-width) solid var(--search-snippet-border-color);
+  border-radius: 4px;
+  font-size: var(--search-snippet-font-size-sm);
+  font-family: var(--search-snippet-font-family);
+  color: var(--search-snippet-text-secondary);
+}
+
+/* Modal content (results area) */
+.modal-content {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: var(--search-snippet-spacing-sm);
+}
+
+.modal-content::-webkit-scrollbar {
+  width: 8px;
+}
+
+.modal-content::-webkit-scrollbar-track {
+  background: var(--search-snippet-surface);
+}
+
+.modal-content::-webkit-scrollbar-thumb {
+  background: var(--search-snippet-border-color);
+  border-radius: var(--search-snippet-border-radius);
+}
+
+.modal-content::-webkit-scrollbar-thumb:hover {
+  background: var(--search-snippet-text-secondary);
+}
+
+/* Results list */
+.modal-results {
+  display: flex;
+  flex-direction: column;
+  gap: var(--search-snippet-spacing-xs);
+}
+
+.modal-result-item {
+  padding: var(--search-snippet-spacing-md);
+  background: transparent;
+  border: var(--search-snippet-border-width) solid transparent;
+  border-radius: calc(var(--search-snippet-border-radius) - 4px);
+  cursor: pointer;
+  transition: var(--search-snippet-transition-fast);
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--search-snippet-spacing-md);
+}
+
+/* Image thumbnail container */
+.modal-result-image-container {
+  flex-shrink: 0;
+  width: 48px;
+  height: 48px;
+  border-radius: 6px;
+  overflow: hidden;
+  background: var(--search-snippet-surface);
+  border: var(--search-snippet-border-width) solid var(--search-snippet-border-color);
+  position: relative;
+}
+
+.modal-result-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0;
+  transition: opacity var(--search-snippet-transition);
+}
+
+.modal-result-image.loaded {
+  opacity: 1;
+}
+
+/* Loading shimmer */
+.modal-result-image-loading {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    90deg,
+    var(--search-snippet-surface) 25%,
+    var(--search-snippet-border-color) 50%,
+    var(--search-snippet-surface) 75%
+  );
+  background-size: 200% 100%;
+  animation: modal-image-shimmer 1.5s infinite;
+}
+
+@keyframes modal-image-shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+/* Placeholder icon */
+.modal-result-image-placeholder {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--search-snippet-text-secondary);
+  opacity: 0.5;
+}
+
+.modal-result-image-placeholder svg {
+  width: 20px;
+  height: 20px;
+}
+
+/* Content wrapper */
+.modal-result-content {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--search-snippet-spacing-xs);
+}
+
+.modal-result-item:hover,
+.modal-result-item.active {
+  background: var(--search-snippet-hover-background);
+  border-color: var(--search-snippet-border-color);
+}
+
+.modal-result-item.active {
+  border-color: var(--search-snippet-primary-color);
+  background: var(--search-snippet-focus-ring);
+}
+
+.modal-result-item:focus-visible {
+  outline: 2px solid var(--search-snippet-primary-color);
+  outline-offset: -2px;
+}
+
+.modal-result-title {
+  font-size: var(--search-snippet-font-size-base);
+  font-weight: var(--search-snippet-font-weight-medium);
+  color: var(--search-snippet-text-color);
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.modal-result-description {
+  font-size: var(--search-snippet-font-size-sm);
+  color: var(--search-snippet-text-secondary);
+  line-height: 1.5;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.modal-result-url {
+  font-size: var(--search-snippet-font-size-sm);
+  color: var(--search-snippet-primary-color);
+  text-decoration: none;
+  display: inline-block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.modal-result-url:hover {
+  text-decoration: underline;
+}
+
+/* Result group header */
+.modal-group-header {
+  padding: var(--search-snippet-spacing-sm) var(--search-snippet-spacing-md);
+  font-size: var(--search-snippet-font-size-sm);
+  font-weight: var(--search-snippet-font-weight-medium);
+  color: var(--search-snippet-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+/* Loading state */
+.modal-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--search-snippet-spacing-xxl);
+  gap: var(--search-snippet-spacing-md);
+  color: var(--search-snippet-text-secondary);
+}
+
+/* Empty state */
+.modal-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--search-snippet-spacing-xxl);
+  gap: var(--search-snippet-spacing-md);
+  color: var(--search-snippet-text-secondary);
+  text-align: center;
+}
+
+.modal-empty-icon {
+  width: 48px;
+  height: 48px;
+  opacity: 0.5;
+}
+
+.modal-empty-title {
+  font-size: var(--search-snippet-font-size-base);
+  font-weight: var(--search-snippet-font-weight-medium);
+  color: var(--search-snippet-text-color);
+}
+
+.modal-empty-description {
+  font-size: var(--search-snippet-font-size-sm);
+}
+
+/* Footer */
+.modal-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--search-snippet-spacing-sm) var(--search-snippet-spacing-md);
+  border-top: var(--search-snippet-border-width) solid var(--search-snippet-border-color);
+  background: var(--search-snippet-surface);
+  font-size: var(--search-snippet-font-size-sm);
+  color: var(--search-snippet-text-secondary);
+  border-radius: 0 0 var(--search-snippet-border-radius) var(--search-snippet-border-radius);
+}
+
+.modal-footer-hints {
+  display: flex;
+  align-items: center;
+  gap: var(--search-snippet-spacing-md);
+}
+
+.modal-footer-hint {
+  display: flex;
+  align-items: center;
+  gap: var(--search-snippet-spacing-xs);
+}
+
+.modal-footer-hint .modal-kbd {
+  min-width: 20px;
+  height: 20px;
+  font-size: 11px;
+}
+
+/* Results count */
+.modal-results-count {
+  font-size: var(--search-snippet-font-size-sm);
+  color: var(--search-snippet-text-secondary);
+}
+
+/* Powered by in modal footer */
+.modal-footer .powered-by-inline {
+  font-size: var(--search-snippet-font-size-sm);
+  color: var(--search-snippet-text-secondary);
+}
+
+.modal-footer .powered-by-inline a {
+  color: var(--search-snippet-text-secondary);
+  text-decoration: none;
+  transition: color var(--search-snippet-transition-fast);
+}
+
+.modal-footer .powered-by-inline a:hover {
+  color: var(--search-snippet-primary-color);
+}
+
+/* Responsive adjustments */
+@media (max-width: 640px) {
+  .modal-container {
+    top: 10%;
+    width: 95%;
+    max-height: 80vh;
+  }
+
+  .modal-footer-hints {
+    display: none;
+  }
+}
+
+/* Animation for modal open */
+@keyframes modal-slide-in {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) scale(0.95) translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) scale(1) translateY(0);
+  }
+}
+
+.modal-container.open {
+  animation: modal-slide-in var(--search-snippet-transition) ease-out;
+}
+`,N="search-modal-snippet";class _ extends HTMLElement{constructor(){super();a(this,"shadow");a(this,"client",null);a(this,"backdrop",null);a(this,"modal",null);a(this,"inputElement",null);a(this,"resultsContainer",null);a(this,"footerCount",null);a(this,"isOpen",!1);a(this,"isLoading",!1);a(this,"results",[]);a(this,"activeIndex",-1);a(this,"debouncedSearch",null);a(this,"handleGlobalKeydown",null);a(this,"handleInputChange",null);a(this,"handleInputKeydown",null);a(this,"handleBackdropClick",null);a(this,"savedBodyStyles",null);a(this,"savedHtmlOverflow",null);this.shadow=this.attachShadow({mode:"open"})}static get observedAttributes(){return["api-url","placeholder","max-results","theme","shortcut","use-meta-key","debounce-ms","hide-branding"]}connectedCallback(){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))}getProps(){return{apiUrl:g(this.getAttribute("api-url"),"http://localhost:3000"),placeholder:g(this.getAttribute("placeholder"),"Search..."),maxResults:y(this.getAttribute("max-results"),10),debounceMs:y(this.getAttribute("debounce-ms"),300),theme:g(this.getAttribute("theme"),"auto"),shortcut:g(this.getAttribute("shortcut"),"k"),useMetaKey:this.getAttribute("use-meta-key")!=="false",hideBranding:w(this.getAttribute("hide-branding"),!1)}}initializeClient(){const e=this.getProps();if(!e.apiUrl){console.error("SearchModalSnippet: api-url attribute is required");return}try{this.client=x(e.apiUrl)}catch(t){console.error("SearchModalSnippet:",t)}}render(){const e=this.getProps(),t=c=>this.performSearch(c);this.debouncedSearch=u(t,e.debounceMs||300);const s=document.createElement("style");s.textContent=`${k}
+${D}`;const r=e.hideBranding?"":`<div class="powered-by-inline">${C}</div>`,n=document.createElement("div");n.innerHTML=`
+      <div class="modal-backdrop" role="presentation"></div>
+      <div class="modal-container" role="dialog" aria-modal="true" aria-labelledby="modal-title">
+        <div class="modal-header">
+          <svg class="modal-search-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" 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>
+          <input
+            type="text"
+            class="modal-search-input"
+            placeholder="${l(e.placeholder||"Search...")}"
+            aria-label="Search"
+            aria-autocomplete="list"
+            aria-controls="modal-results-list"
+            aria-expanded="false"
+            autocomplete="off"
+            spellcheck="false"
+          />
+        </div>
+        <div class="modal-content">
+          <div class="modal-results" id="modal-results-list" role="listbox" aria-label="Search results">
+            ${this.renderEmptyState()}
+          </div>
+        </div>
+        <div class="modal-footer">
+          <div class="modal-footer-hints">
+            <div class="modal-footer-hint">
+              <kbd class="modal-kbd">↑</kbd>
+              <kbd class="modal-kbd">↓</kbd>
+              <span>Navigate</span>
+            </div>
+            <div class="modal-footer-hint">
+              <kbd class="modal-kbd">↵</kbd>
+              <span>Select</span>
+            </div>
+            <div class="modal-footer-hint">
+              <kbd class="modal-kbd">Esc</kbd>
+              <span>Close</span>
+            </div>
+          </div>
+          ${r}
+        </div>
+      </div>
+    `,this.shadow.innerHTML="",this.shadow.appendChild(s),this.shadow.appendChild(n),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()}attachGlobalKeyboardShortcut(){const e=this.getProps(),t=e.shortcut?.toLowerCase()||"k";this.handleGlobalKeydown=s=>{(e.useMetaKey&&s.metaKey||s.ctrlKey)&&s.key.toLowerCase()===t&&!this.isOpen&&(s.preventDefault(),this.open())},document.addEventListener("keydown",this.handleGlobalKeydown)}attachEventListeners(){!this.inputElement||!this.backdrop||(this.handleInputChange=e=>{const s=e.target.value.trim();s.length>0&&this.debouncedSearch?this.debouncedSearch(s):(this.results=[],this.activeIndex=-1,this.showEmptyState())},this.inputElement.addEventListener("input",this.handleInputChange),this.handleInputKeydown=e=>{switch(e.key){case"ArrowDown":e.preventDefault(),this.navigateResults(1);break;case"ArrowUp":e.preventDefault(),this.navigateResults(-1);break;case"Enter":e.preventDefault(),this.selectActiveResult();break;case"Escape":e.preventDefault(),this.close();break}},this.inputElement.addEventListener("keydown",this.handleInputKeydown),this.handleBackdropClick=e=>{e.target===this.backdrop&&this.close()},this.backdrop.addEventListener("click",this.handleBackdropClick))}navigateResults(e){if(this.results.length===0)return;const t=this.activeIndex+e;t<0?this.activeIndex=this.results.length-1:t>=this.results.length?this.activeIndex=0:this.activeIndex=t,this.updateActiveResult()}updateActiveResult(){const e=this.resultsContainer?.querySelectorAll(".modal-result-item");e&&(e.forEach((t,s)=>{s===this.activeIndex?(t.classList.add("active"),t.setAttribute("aria-selected","true"),t.scrollIntoView({block:"nearest"})):(t.classList.remove("active"),t.setAttribute("aria-selected","false"))}),this.inputElement&&this.activeIndex>=0?this.inputElement.setAttribute("aria-activedescendant",`result-${this.activeIndex}`):this.inputElement&&this.inputElement.removeAttribute("aria-activedescendant"))}selectActiveResult(){if(this.activeIndex<0||this.activeIndex>=this.results.length){const t=this.inputElement?.value.trim();t&&t.length>0&&this.performSearch(t);return}const e=this.results[this.activeIndex];this.dispatchEvent(v("result-select",{result:e,index:this.activeIndex})),e.url&&(window.location.href=e.url),this.close()}async performSearch(e){if(!(this.isLoading||!this.client)){this.isLoading=!0,this.showLoadingState();try{const t=await this.client.search(e,{streaming:!1}),s=this.getProps();this.results=t.slice(0,s.maxResults||10),this.activeIndex=this.results.length>0?0:-1,this.displayResults(this.results,e)}catch(t){this.showErrorState(t.message)}finally{this.isLoading=!1}}}displayResults(e,t){if(!this.resultsContainer)return;if(e.length===0){this.showNoResultsState(t);return}const s=e.map((r,n)=>this.renderResult(r,n)).join("");this.resultsContainer.innerHTML=s,this.footerCount&&(this.footerCount.textContent=`${e.length} result${e.length===1?"":"s"}`),this.inputElement&&this.inputElement.setAttribute("aria-expanded","true"),this.attachResultHandlers(),this.updateActiveResult()}renderResult(e,t){const s=this.renderResultImage(e.image,e.title);return`
+      <div 
+        class="modal-result-item${t===this.activeIndex?" active":""}" 
+        role="option" 
+        id="result-${t}"
+        aria-selected="${t===this.activeIndex}"
+        tabindex="-1"
+        data-index="${t}"
+        data-url="${l(e.url||"")}"
+      >
+        ${s}
+        <div class="modal-result-content">
+          <div class="modal-result-title">${l(e.title||"")}</div>
+          ${e.description?`<div class="modal-result-description">${l(e.description)}</div>`:""}
+          ${e.url?`<a href="${l(e.url)}" class="modal-result-url" tabindex="-1">${l(e.url)}</a>`:""}
+        </div>
+      </div>
+    `}renderResultImage(e,t){const s='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>';return e?`
+      <div class="modal-result-image-container">
+        <div class="modal-result-image-loading"></div>
+        <div class="modal-result-image-placeholder" style="display: none;">${s}</div>
+        <img 
+          class="modal-result-image" 
+          src="${l(e)}" 
+          alt="${l(t)}"
+          loading="lazy"
+        />
+      </div>
+    `:`
+        <div class="modal-result-image-container">
+          <div class="modal-result-image-placeholder">${s}</div>
+        </div>
+      `}attachResultHandlers(){const e=this.resultsContainer?.querySelectorAll(".modal-result-item");if(!e)return;e.forEach((s,r)=>{s.addEventListener("click",n=>{n.target.classList.contains("modal-result-url")||(this.activeIndex=r,this.selectActiveResult())}),s.addEventListener("mouseenter",()=>{this.activeIndex=r,this.updateActiveResult()})}),this.resultsContainer?.querySelectorAll(".modal-result-image")?.forEach(s=>{s.addEventListener("load",()=>{s.classList.add("loaded"),s.closest(".modal-result-image-container")?.querySelector(".modal-result-image-loading")?.remove()}),s.addEventListener("error",()=>{const r=s.closest(".modal-result-image-container");r?.querySelector(".modal-result-image-loading")?.remove();const n=r?.querySelector(".modal-result-image-placeholder");n&&(n.style.display="flex"),s.style.display="none"})})}renderEmptyState(){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>
+    `}showEmptyState(){this.resultsContainer&&(this.resultsContainer.innerHTML=this.renderEmptyState(),this.footerCount&&(this.footerCount.textContent=""),this.inputElement&&this.inputElement.setAttribute("aria-expanded","false"))}showLoadingState(){this.resultsContainer&&(this.resultsContainer.innerHTML=`
+      <div class="modal-loading">
+        <div class="loading" aria-label="Loading"></div>
+        <div>Searching...</div>
+      </div>
+    `,this.footerCount&&(this.footerCount.textContent="Searching..."))}showNoResultsState(e){this.resultsContainer&&(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 "${l(e)}"</div>
+      </div>
+    `,this.footerCount&&(this.footerCount.textContent="0 results"),this.inputElement&&this.inputElement.setAttribute("aria-expanded","false"))}showErrorState(e){this.resultsContainer&&(this.resultsContainer.innerHTML=`
+      <div class="error">
+        <strong>Error:</strong> ${l(e)}
+      </div>
+    `,this.footerCount&&(this.footerCount.textContent="Error"))}updateTheme(e){const t=e==="light"||e==="dark"||e==="auto"?e:"auto";t==="auto"?this.removeAttribute("theme"):this.setAttribute("theme",t)}lockBodyScroll(){const e=window.scrollY;this.savedBodyStyles={overflow:document.body.style.overflow,position:document.body.style.position,top:document.body.style.top,width:document.body.style.width},this.savedHtmlOverflow=document.documentElement.style.overflow,document.documentElement.style.overflow="hidden",document.body.style.overflow="hidden",document.body.style.position="fixed",document.body.style.top=`-${e}px`,document.body.style.width="100%"}unlockBodyScroll(){if(!this.savedBodyStyles)return;const e=Math.abs(Number.parseInt(document.body.style.top||"0",10));document.documentElement.style.overflow=this.savedHtmlOverflow||"",document.body.style.overflow=this.savedBodyStyles.overflow,document.body.style.position=this.savedBodyStyles.position,document.body.style.top=this.savedBodyStyles.top,document.body.style.width=this.savedBodyStyles.width,window.scrollTo(0,e),this.savedBodyStyles=null,this.savedHtmlOverflow=null}cleanup(){this.handleGlobalKeydown&&(document.removeEventListener("keydown",this.handleGlobalKeydown),this.handleGlobalKeydown=null),this.inputElement&&(this.handleInputChange&&this.inputElement.removeEventListener("input",this.handleInputChange),this.handleInputKeydown&&this.inputElement.removeEventListener("keydown",this.handleInputKeydown)),this.backdrop&&this.handleBackdropClick&&this.backdrop.removeEventListener("click",this.handleBackdropClick),this.handleInputChange=null,this.handleInputKeydown=null,this.handleBackdropClick=null,this.client&&this.client.cancelAllRequests()}open(){this.isOpen||(this.isOpen=!0,this.backdrop?.classList.add("open"),this.modal?.classList.add("open"),requestAnimationFrame(()=>{requestAnimationFrame(()=>{this.inputElement?.focus()})}),this.lockBodyScroll(),this.dispatchEvent(v("open",void 0)))}close(){this.isOpen&&(this.isOpen=!1,this.backdrop?.classList.remove("open"),this.modal?.classList.remove("open"),this.inputElement&&(this.inputElement.value=""),this.results=[],this.activeIndex=-1,this.showEmptyState(),this.unlockBodyScroll(),this.dispatchEvent(v("close",void 0)))}toggle(){this.isOpen?this.close():this.open()}async search(e){this.isOpen||this.open(),this.inputElement&&(this.inputElement.value=e),await this.performSearch(e)}getResults(){return[...this.results]}isModalOpen(){return this.isOpen}}customElements.get(N)||customElements.define(N,_),d.AISearchClient=z,d.ChatBubbleSnippet=B,d.ChatPageSnippet=R,d.SearchBarSnippet=S,d.SearchModalSnippet=_,d.default=S,Object.defineProperties(d,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
+//# sourceMappingURL=search-snippet.umd.js.map