@osvi-ai/chat 0.1.0 → 0.1.1

package/dist/ui.mjs

@@ -1,30 +1,32 @@
-import { nothing as d, html as a, LitElement as W, css as X, unsafeCSS as x } from "lit";
-import { property as l, state as b } from "lit/decorators.js";
-import { c as et, i as it, a as st, b as R } from "./index-BsRyQwUM.js";
-import { repeat as nt } from "lit/directives/repeat.js";
-import { live as rt } from "lit/directives/live.js";
-const Y = { primary: "#4f46e5", background: "#ffffff", surface: "#f4f4f5", text: "#18181b", userBubble: "#4f46e5", assistantBubble: "#f4f4f5" }, at = { primary: "#6366f1", background: "#0a0a12", surface: "#1c1c27", text: "#f4f4f5", userBubble: "#6366f1", assistantBubble: "#1f1f2b" }, ot = { none: "0px", sm: "6px", md: "10px", lg: "16px", full: "9999px" }, C = { primary: "--osvi-color-primary", background: "--osvi-color-background", surface: "--osvi-color-surface", text: "--osvi-color-text", userBubble: "--osvi-color-user-bubble", assistantBubble: "--osvi-color-assistant-bubble" }, w = (i) => `var(${C[i]}, ${Y[i]})`;
-function F(i) {
-  const t = { ...i?.mode === "dark" ? at : Y, ...i?.colors }, e = {};
-  for (const n of Object.keys(C)) e[C[n]] = t[n];
-  const s = i?.radius ?? "md";
-  return e["--osvi-radius"] = typeof s == "number" ? `${s}px` : ot[s], e;
+import { nothing as c, html as a, svg as b, LitElement as W, css as X, unsafeCSS as nt } from "lit";
+import { property as l, state as v } from "lit/decorators.js";
+import { c as at, i as ot, a as lt, b as B } from "./index-HWHyM4-l.js";
+import { repeat as dt } from "lit/directives/repeat.js";
+import { live as ct } from "lit/directives/live.js";
+const Z = { primary: "#4f46e5", background: "#ffffff", surface: "#f4f4f5", text: "#18181b", userBubble: "#4f46e5", assistantBubble: "#f4f4f5" }, pt = { primary: "#6366f1", background: "#0a0a12", surface: "#1c1c27", text: "#f4f4f5", userBubble: "#6366f1", assistantBubble: "#1f1f2b" }, ht = { none: "0px", sm: "6px", md: "10px", lg: "16px", full: "9999px" }, C = { primary: "--osvi-color-primary", background: "--osvi-color-background", surface: "--osvi-color-surface", text: "--osvi-color-text", userBubble: "--osvi-color-user-bubble", assistantBubble: "--osvi-color-assistant-bubble" }, ut = (i) => `var(${C[i]}, ${Z[i]})`;
+function E(i) {
+  const t = { ...i?.mode === "dark" ? pt : Z, ...i?.colors };
+  !i?.colors?.userBubble && i?.colors?.primary && (t.userBubble = i.colors.primary);
+  const e = {};
+  for (const s of Object.keys(C)) e[C[s]] = t[s];
+  const r = i?.radius ?? "md";
+  return e["--osvi-radius"] = typeof r == "number" ? `${r}px` : ht[r], e;
 }
-function lt(i) {
+function bt(i) {
   if (!i) return {};
-  if (i.mode) return F(i);
-  const t = F(i), e = {};
-  for (const s of Object.keys(i.colors ?? {})) e[C[s]] = t[C[s]];
+  if (i.mode) return E(i);
+  const t = E(i), e = {};
+  for (const r of Object.keys(i.colors ?? {})) e[C[r]] = t[C[r]];
   return i.radius !== void 0 && (e["--osvi-radius"] = t["--osvi-radius"]), e;
 }
-const M = /* @__PURE__ */ new WeakMap();
-function G(i, t) {
-  for (const s of M.get(i) ?? []) i.style.removeProperty(s);
-  const e = lt(t);
-  for (const [s, n] of Object.entries(e)) i.style.setProperty(s, n);
-  M.set(i, Object.keys(e));
+const O = /* @__PURE__ */ new WeakMap();
+function Q(i, t) {
+  for (const r of O.get(i) ?? []) i.style.removeProperty(r);
+  const e = bt(t);
+  for (const [r, s] of Object.entries(e)) i.style.setProperty(r, s);
+  O.set(i, Object.keys(e));
 }
-const N = {
+const H = {
   placeholder: "Type your message…",
   send: "Send",
   typing: "Typing…",
@@ -43,32 +45,32 @@ const N = {
   rateLimited: "Too many requests. Please try again in a few minutes.",
   tryAgain: "Try again",
   closeChat: "Close chat",
-  poweredBy: "Powered by OSVI",
+  poweredBy: "Powered by Osvi AI",
   newChat: "New chat",
   emptyState: "Send a message to start chatting.",
   defaultTitle: "Chat"
-}, L = /* @__PURE__ */ new Set();
-function Q(i, t) {
-  L.has(i) || (L.add(i), console.warn(`[osvi-chat] ${t}`));
+}, N = /* @__PURE__ */ new Set();
+function tt(i, t) {
+  N.has(i) || (N.add(i), console.warn(`[osvi-chat] ${t}`));
 }
-function y(i, t) {
+function x(i, t) {
   return i != null && t.includes(i) ? i : void 0;
 }
 function K(i) {
   if (i != null)
-    return y(i, ["none", "sm", "md", "lg", "full"]) ?? (/^\d{1,2}(?:px)?$/.test(i) ? Number(i.replace(/px$/, "")) : void 0);
+    return x(i, ["none", "sm", "md", "lg", "full"]) ?? (/^\d{1,2}(?:px)?$/.test(i) ? Number(i.replace(/px$/, "")) : void 0);
 }
-function H(i) {
+function V(i) {
   if (i) {
     try {
       const t = new URL(i);
       if (!t.username && !t.password && (t.protocol === "https:" || t.protocol === "http:" && ["localhost", "127.0.0.1"].includes(t.hostname))) return i.replace(/\/+$/, "");
     } catch {
     }
-    Q("base-url", "ignored an invalid base-url (https required, http only for localhost)");
+    tt("base-url", "ignored an invalid base-url (https required, http only for localhost)");
   }
 }
-function dt(i) {
+function ft(i) {
   if (i) {
     if (/^data:image\/(png|jpeg|gif|webp);base64,[a-z0-9+/]+={0,2}$/i.test(i)) return i;
     try {
@@ -85,11 +87,11 @@ function J(i, t) {
       if (e && typeof e == "object" && !Array.isArray(e)) return e;
     } catch {
     }
-    Q(i, `ignored invalid JSON in the ${i} attribute`);
+    tt(i, `ignored invalid JSON in the ${i} attribute`);
   }
 }
-const ct = /https?:\/\/[^\s<>"']+/g, S = (i, t) => i.split(t).length - 1;
-function ht(i) {
+const gt = /https?:\/\/[^\s<>"']+/g, S = (i, t) => i.split(t).length - 1;
+function vt(i) {
   for (; ; ) {
     const t = i[i.length - 1];
     if (t && ".,!?;:".includes(t) || t === ")" && S(i, ")") > S(i, "(") || t === "]" && S(i, "]") > S(i, "[")) {
@@ -99,65 +101,76 @@ function ht(i) {
     return i;
   }
 }
-function ut(i) {
+function mt(i) {
   const t = [];
   let e = 0;
-  for (const s of i.matchAll(ct)) {
-    const n = ht(s[0]), r = s.index;
+  for (const r of i.matchAll(gt)) {
+    const s = vt(r[0]), n = r.index;
     try {
-      const o = new URL(n);
+      const o = new URL(s);
       if (!["http:", "https:"].includes(o.protocol)) continue;
     } catch {
       continue;
     }
-    r > e && t.push({ text: i.slice(e, r) }), t.push({ href: n, text: n }), e = r + n.length;
+    n > e && t.push({ text: i.slice(e, n) }), t.push({ href: s, text: s }), e = n + s.length;
   }
   return e < i.length && t.push({ text: i.slice(e) }), t.length ? t : [{ text: i }];
 }
-function pt(i, t, e, s, n) {
-  return a`${i.items.length ? nt(i.items, (r) => r.id, (r) => {
-    if (r.kind === "divider") return a`<p class="divider">${t.sessionEnded}</p>`;
-    if (r.kind === "message") return a`<article class=${`bubble ${r.role}`}>${r.role === "human" ? a`<small>Team</small>` : d}<p>${ut(r.content).map(($) => "href" in $ ? a`<a href=${$.href} target="_blank" rel="noopener noreferrer">${$.text}</a>` : $.text)}</p>${r.role === "user" && r.status === "failed" ? a`<span>${t.sendFailed}</span><button type="button" @click=${() => n(r.id)}>${t.retry}</button>` : d}</article>`;
-    const o = r.interaction, u = o.interaction_id === i.activeInteraction?.interaction_id && o.interaction_status === "pending", _ = !u || i.interactionPending || i.mode === "human";
+function yt(i, t, e, r, s) {
+  return a`${i.items.length ? dt(i.items, (n) => n.id, (n) => {
+    if (n.kind === "divider") return a`<p class="divider">${t.sessionEnded}</p>`;
+    if (n.kind === "message") return a`<article class=${`bubble ${n.role}`}>${n.role === "human" ? a`<small class="team">Team</small>` : c}<p>${mt(n.content).map((k) => "href" in k ? a`<a href=${k.href} target="_blank" rel="noopener noreferrer">${k.text}</a>` : k.text)}</p>${n.role === "user" && n.status === "failed" ? a`<span class="failed"><span>${t.sendFailed}</span><button type="button" @click=${() => s(n.id)}>${t.retry}</button></span>` : c}</article>`;
+    const o = n.interaction, h = o.interaction_id === i.activeInteraction?.interaction_id && o.interaction_status === "pending", f = !h || i.interactionPending || i.mode === "human";
     switch (o.tool_type) {
       case "ui_buttons":
-        return a`<osvi-buttons data-live=${u ? "true" : "false"} .interaction=${o} .disabled=${_} .variant=${e.buttons ?? "chips"} base-url=${s}></osvi-buttons>`;
+        return a`<osvi-buttons data-live=${h ? "true" : "false"} .interaction=${o} .disabled=${f} .variant=${e.buttons ?? "chips"} base-url=${r}></osvi-buttons>`;
       case "ui_carousel":
-        return a`<osvi-carousel data-live=${u ? "true" : "false"} .interaction=${o} .disabled=${_} .variant=${e.carousel ?? "slider"} base-url=${s}></osvi-carousel>`;
+        return a`<osvi-carousel data-live=${h ? "true" : "false"} .interaction=${o} .disabled=${f} .variant=${e.carousel ?? "slider"} base-url=${r}></osvi-carousel>`;
       case "ui_date_picker":
-        return a`<osvi-date-picker data-live=${u ? "true" : "false"} .interaction=${o} .disabled=${_} base-url=${s}></osvi-date-picker>`;
+        return a`<osvi-date-picker data-live=${h ? "true" : "false"} .interaction=${o} .disabled=${f} base-url=${r}></osvi-date-picker>`;
       default:
         return a`<p>${o.content}</p>`;
     }
-  }) : a`<p>${t.emptyState}</p>`}${i.awaitingReply ? a`<p aria-label=${t.typing}>${t.typing}<span aria-hidden="true"> •••</span></p>` : d}`;
+  }) : a`<p class="empty">${t.emptyState}</p>`}${i.awaitingReply ? a`<div class="typing" role="img" aria-label=${t.typing}><i></i><i></i><i></i></div>` : c}`;
 }
-function ft(i) {
-  return a`<div class="composer"><textarea aria-label="Message" placeholder=${i.placeholder} .value=${rt(i.draft)} ?disabled=${i.disabled} @input=${i.input} @keydown=${(t) => {
+const m = (i, t = "") => b`<svg class=${t} viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${i}</svg>`;
+m(b`<path d="M4 5.5A2.5 2.5 0 0 1 6.5 3h11A2.5 2.5 0 0 1 20 5.5v8a2.5 2.5 0 0 1-2.5 2.5H10l-4.2 3.6c-.5.4-1.3.1-1.3-.6V16A2.5 2.5 0 0 1 4 13.5z"/><path d="M8.5 8.5h7M8.5 11.5h4"/>`);
+const xt = m(b`<path d="M4 5.5A2.5 2.5 0 0 1 6.5 3h11A2.5 2.5 0 0 1 20 5.5v8a2.5 2.5 0 0 1-2.5 2.5H10l-4.2 3.6c-.5.4-1.3.1-1.3-.6V16A2.5 2.5 0 0 1 4 13.5z"/><path d="M12 6.5v6M9 9.5h6"/>`), $t = m(b`<path d="M6 6l12 12M18 6L6 18"/>`);
+m(b`<path d="M4 5.5A2.5 2.5 0 0 1 6.5 3h11A2.5 2.5 0 0 1 20 5.5v8a2.5 2.5 0 0 1-2.5 2.5H10l-4.2 3.6c-.5.4-1.3.1-1.3-.6V16A2.5 2.5 0 0 1 4 13.5z"/><path d="M8.5 8.5h7M8.5 11.5h4"/>`, "chat");
+m(b`<path d="M6 6l12 12M18 6L6 18"/>`, "close");
+const wt = m(b`<path d="M12 19V5M5.5 11.5L12 5l6.5 6.5"/>`), et = m(b`<path d="M15 6l-6 6 6 6"/>`), R = m(b`<path d="M9 6l6 6-6 6"/>`), kt = b`<svg viewBox="0 0 134 134" aria-hidden="true" focusable="false"><defs><linearGradient id="osvi-g" x1="-36.28" y1="32.2" x2="161.98" y2="93.64" gradientUnits="userSpaceOnUse"><stop offset=".304" stop-color="#155DFC"/><stop offset=".822" stop-color="#353333"/></linearGradient><mask id="osvi-m" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-7" y="-6" width="149" height="150"><path fill-rule="evenodd" clip-rule="evenodd" fill="#0F0F0F" d="M141.385 114.008L141.622 108.411V29.4704L141.385 23.8743C139.964 7.44314 126.224 -5.41602 109.523 -5.41602H25.3094C8.60869 -5.41602 -5.13083 7.44314 -6.55216 23.8743L-6.78906 29.4704V108.411L-6.55216 114.008C-5.13083 130.439 8.60869 143.298 25.3094 143.298H109.523C126.224 143.298 139.964 130.439 141.385 114.008ZM25.3094 102.339C9.55625 102.339 65.7059 83.8874 53.6176 66.6191C42.3654 50.5452 93.7703 32.6852 109.523 32.6852C125.277 32.6852 73.161 54.1172 81.4521 80.9071C86.1899 96.2156 40.944 102.339 25.3094 102.339Z"/></mask></defs><g mask="url(#osvi-m)"><ellipse cx="66.88" cy="66.79" rx="67.22" ry="66.81" fill="url(#osvi-g)"/></g></svg>`;
+function _t(i) {
+  return a`<div class="composer"><textarea rows="1" aria-label="Message" placeholder=${i.placeholder} .value=${ct(i.draft)} ?disabled=${i.disabled} @input=${(t) => {
+    const e = t.target;
+    e.style.height = "auto", e.style.height = `${Math.min(e.scrollHeight, 120)}px`, i.input(t);
+  }} @keydown=${(t) => {
     t.key === "Enter" && !t.shiftKey && !t.isComposing && !i.disabled && (t.preventDefault(), i.send());
-  }}></textarea><button type="button" aria-label=${i.strings.send} ?disabled=${i.disabled || !i.draft.trim()} @click=${i.send}>${i.strings.send}</button></div>`;
+  }}></textarea><button type="button" class="send" title=${i.strings.send} aria-label=${i.strings.send} ?disabled=${i.disabled || !i.draft.trim()} @click=${i.send}>${wt}<span class="sr">${i.strings.send}</span></button></div>`;
 }
-var bt = Object.defineProperty, h = (i, t, e, s) => {
-  for (var n = void 0, r = i.length - 1, o; r >= 0; r--)
-    (o = i[r]) && (n = o(t, e, n) || n);
-  return n && bt(t, e, n), n;
+var Ct = Object.defineProperty, p = (i, t, e, r) => {
+  for (var s = void 0, n = i.length - 1, o; n >= 0; n--)
+    (o = i[n]) && (s = o(t, e, s) || s);
+  return s && Ct(t, e, s), s;
 };
-const z = () => ({ status: "idle", mode: "ai", awaitingReply: !1, items: [], activeInteraction: null, interactionPending: !1, agent: null, error: null }), Z = { fromAttribute: (i) => i !== "false" };
-var f;
-const c = (f = class extends W {
+const G = () => ({ status: "idle", mode: "ai", awaitingReply: !1, items: [], activeInteraction: null, interactionPending: !1, agent: null, error: null }), it = { fromAttribute: (i) => i !== "false" };
+var g;
+const d = (g = class extends W {
   constructor() {
-    super(...arguments), this.agentId = "", this.baseUrl = "", this.client = null, this.theme = {}, this.variants = {}, this.strings = {}, this.poweredBy = !0, this.newChat = !0, this.header = {}, this.closable = !1, this.chatState = z(), this.draft = "", this.busy = !1, this.typed = null, this.ownClient = null, this.boundClient = null, this.ownKey = "", this.generation = 0, this.followBottom = !0, this.focusedInteraction = null, this.send = () => {
+    super(...arguments), this.agentId = "", this.baseUrl = "", this.client = null, this.theme = {}, this.variants = {}, this.strings = {}, this.poweredBy = !0, this.newChat = !0, this.header = {}, this.closable = !1, this.chatState = G(), this.draft = "", this.busy = !1, this.typed = null, this.ownClient = null, this.boundClient = null, this.ownKey = "", this.generation = 0, this.followBottom = !0, this.focusedInteraction = null, this.send = () => {
       if (this.blocked || !this.draft.trim() || !this.boundClient) return;
-      const t = this.boundClient, e = this.draft.trim(), s = this.typed;
-      this.draft = "", s && this.restoreDraft(), this.requestUpdate(), this.run(() => s ? t.respond(s.id, { kind: "text", value: e }) : t.send(e));
+      const t = this.boundClient, e = this.draft.trim(), r = this.typed;
+      this.draft = "", r && this.restoreDraft(), this.requestUpdate();
+      const s = this.renderRoot.querySelector("textarea");
+      s && (s.style.height = ""), this.run(() => r ? t.respond(r.id, { kind: "text", value: e }) : t.send(e));
     }, this.respond = (t) => {
-      const e = t.detail, s = this.chatState;
-      if (!e || this.busy || s.mode !== "ai" || s.interactionPending || s.activeInteraction?.interaction_status !== "pending" || e.interactionId !== s.activeInteraction.interaction_id) return;
+      const e = t.detail, r = this.chatState;
+      if (!e || this.busy || r.mode !== "ai" || r.interactionPending || r.activeInteraction?.interaction_status !== "pending" || e.interactionId !== r.activeInteraction.interaction_id) return;
       t.stopPropagation();
-      const n = this.boundClient;
-      n && this.run(() => n.respond(e.interactionId, e.response));
+      const s = this.boundClient;
+      s && this.run(() => s.respond(e.interactionId, e.response));
     }, this.requestInput = (t) => {
-      const e = t.detail, s = this.chatState;
-      !e || this.busy || s.mode !== "ai" || s.interactionPending || s.activeInteraction?.interaction_status !== "pending" || e.interactionId !== s.activeInteraction.interaction_id || (t.stopPropagation(), this.typed = { id: e.interactionId, placeholder: typeof e.placeholder == "string" ? e.placeholder : void 0, previousDraft: this.typed?.previousDraft ?? this.draft }, this.draft = "", this.requestUpdate(), this.updateComplete.then(() => this.renderRoot.querySelector("textarea")?.focus()));
+      const e = t.detail, r = this.chatState;
+      !e || this.busy || r.mode !== "ai" || r.interactionPending || r.activeInteraction?.interaction_status !== "pending" || e.interactionId !== r.activeInteraction.interaction_id || (t.stopPropagation(), this.typed = { id: e.interactionId, placeholder: typeof e.placeholder == "string" ? e.placeholder : void 0, previousDraft: this.typed?.previousDraft ?? this.draft }, this.draft = "", this.requestUpdate(), this.updateComplete.then(() => this.renderRoot.querySelector("textarea")?.focus()));
     };
   }
   connectedCallback() {
@@ -173,33 +186,33 @@ const c = (f = class extends W {
   }
   syncClient() {
     if (!this.isConnected || !this.client && !this.agentId && !this.boundClient) return;
-    const t = JSON.stringify([this.agentId, H(this.baseUrl)]);
-    if ((this.client ? this.boundClient === this.client && !this.ownClient : this.ownClient && t === this.ownKey) || (this.releaseClient(), this.chatState = z(), !this.client && !this.agentId)) return;
-    const e = !this.client, s = this.client ?? f.clientFactory({ agentId: this.agentId, baseUrl: H(this.baseUrl) });
-    this.boundClient = s, e && (this.ownClient = s, this.ownKey = t);
-    const n = this.generation;
-    this.chatState = s.getState(), this.requestUpdate(), this.unsubscribe = s.subscribe((r) => {
-      this.generation !== n || this.boundClient !== s || (this.chatState = r, this.requestUpdate(), this.typed && (r.mode === "human" || r.activeInteraction?.interaction_id !== this.typed.id || r.activeInteraction.interaction_status !== "pending") && this.restoreDraft());
-    }), e && this.run(() => s.start());
+    const t = JSON.stringify([this.agentId, V(this.baseUrl)]);
+    if ((this.client ? this.boundClient === this.client && !this.ownClient : this.ownClient && t === this.ownKey) || (this.releaseClient(), this.chatState = G(), !this.client && !this.agentId)) return;
+    const e = !this.client, r = this.client ?? g.clientFactory({ agentId: this.agentId, baseUrl: V(this.baseUrl) });
+    this.boundClient = r, e && (this.ownClient = r, this.ownKey = t);
+    const s = this.generation;
+    this.chatState = r.getState(), this.requestUpdate(), this.unsubscribe = r.subscribe((n) => {
+      this.generation !== s || this.boundClient !== r || (this.chatState = n, this.requestUpdate(), this.typed && (n.mode === "human" || n.activeInteraction?.interaction_id !== this.typed.id || n.activeInteraction.interaction_status !== "pending") && this.restoreDraft());
+    }), e && this.run(() => r.start());
   }
   willUpdate() {
-    this.syncClient(), G(this, this.mergedTheme());
+    this.syncClient(), Q(this, this.mergedTheme());
   }
   mergedTheme() {
-    const t = J("theme", this.themeAttribute), e = {}, s = t?.colors;
-    if (s && typeof s == "object" && !Array.isArray(s))
+    const t = J("theme", this.themeAttribute), e = {}, r = t?.colors;
+    if (r && typeof r == "object" && !Array.isArray(r))
       for (const o of ["primary", "background", "surface", "text", "userBubble", "assistantBubble"]) {
-        const u = s[o];
-        typeof u == "string" && (e[o] = u);
+        const h = r[o];
+        typeof h == "string" && (e[o] = h);
       }
     typeof this.primaryColor == "string" && (e.primary = this.primaryColor);
-    const n = K(this.radius) ?? (typeof t?.radius == "number" && Number.isInteger(t.radius) && t.radius >= 0 && t.radius <= 99 ? t.radius : typeof t?.radius == "string" ? K(t.radius) : void 0), r = y(this.mode, ["light", "dark"]) ?? y(typeof t?.mode == "string" ? t.mode : void 0, ["light", "dark"]);
-    return { ...this.theme, colors: { ...this.theme?.colors, ...e }, ...n === void 0 ? {} : { radius: n }, ...r === void 0 ? {} : { mode: r } };
+    const s = K(this.radius) ?? (typeof t?.radius == "number" && Number.isInteger(t.radius) && t.radius >= 0 && t.radius <= 99 ? t.radius : typeof t?.radius == "string" ? K(t.radius) : void 0), n = x(this.mode, ["light", "dark"]) ?? x(typeof t?.mode == "string" ? t.mode : void 0, ["light", "dark"]);
+    return { ...this.theme, colors: { ...this.theme?.colors, ...e }, ...s === void 0 ? {} : { radius: s }, ...n === void 0 ? {} : { mode: n } };
   }
   get labels() {
-    const t = { ...N };
+    const t = { ...H };
     for (const e of [this.strings, J("strings", this.stringsAttribute)])
-      for (const s of Object.keys(N)) typeof e?.[s] == "string" && (t[s] = e[s]);
+      for (const r of Object.keys(H)) typeof e?.[r] == "string" && (t[r] = e[r]);
     return t;
   }
   get blocked() {
@@ -241,121 +254,184 @@ const c = (f = class extends W {
     return e.error?.code === "origin_not_allowed" ? t.originBlocked : e.error && ["agent_inactive", "agent_archived", "agent_not_found"].includes(e.error.code) ? t.unavailable : e.error?.code === "rate_limited" ? t.rateLimited : e.error?.code === "token_failed" ? e.error.message : e.status === "recovering" ? t.reconnecting : e.status === "offline" ? t.offline : e.interactionPending || this.busy && this.typed ? t.sending : e.activeInteraction?.interaction_status === "pending" ? e.mode === "human" ? t.pausedForHuman : this.typed ? t.typeAnswer : t.chooseOption : e.status === "closed" ? t.sessionEnded : "";
   }
   render() {
-    const t = this.labels, e = this.chatState, s = this.boundClient, n = dt(this.headerAvatar ?? this.header.avatarUrl), r = { ...this.variants, ...y(this.buttons, ["chips", "list"]) ? { buttons: y(this.buttons, ["chips", "list"]) } : {}, ...y(this.carousel, ["slider", "list"]) ? { carousel: y(this.carousel, ["slider", "list"]) } : {} };
-    return a`<header>${n ? a`<img src=${n} alt="" referrerpolicy="no-referrer">` : d}<div class="heading"><h2>${this.headerTitle ?? this.header.title ?? e.agent?.name ?? t.defaultTitle}</h2>${this.headerSubtitle ?? this.header.subtitle ? a`<p>${this.headerSubtitle ?? this.header.subtitle}</p>` : d}${e.mode === "human" ? a`<small>${t.humanJoined}</small>` : d}</div>
-      ${this.newChat ? a`<button type="button" ?disabled=${!s || this.sessionBusy} @click=${() => s && !this.sessionBusy && void this.run(() => s.newSession())}>${t.newChat}</button>` : d}
-      ${this.closable ? a`<button type="button" aria-label=${t.closeChat} @click=${() => this.dispatchEvent(new CustomEvent("osvi-close", { bubbles: !0, composed: !0 }))}>×</button>` : d}</header>
-      <div class="transcript" role="log" aria-live="polite" aria-label="Conversation" @scroll=${(o) => {
-      const u = o.currentTarget;
-      this.followBottom = u.scrollHeight - u.scrollTop - u.clientHeight <= 80;
-    }} @osvi-respond=${this.respond} @osvi-request-input=${this.requestInput}>${pt(e, t, r, s?.resolveUrl("") ?? "", (o) => {
-      s && this.run(() => s.retry(o));
+    const t = this.labels, e = this.chatState, r = this.boundClient, s = ft(this.headerAvatar ?? this.header.avatarUrl), n = { ...this.variants, ...x(this.buttons, ["chips", "list"]) ? { buttons: x(this.buttons, ["chips", "list"]) } : {}, ...x(this.carousel, ["slider", "list"]) ? { carousel: x(this.carousel, ["slider", "list"]) } : {} }, o = this.headerTitle ?? this.header.title ?? e.agent?.name ?? t.defaultTitle;
+    return a`<header>${s ? a`<img class="avatar" src=${s} alt="" referrerpolicy="no-referrer">` : a`<span class="avatar" aria-hidden="true">${o.trim().charAt(0).toUpperCase()}</span>`}<div class="heading"><h2>${o}</h2>${this.headerSubtitle ?? this.header.subtitle ? a`<p>${this.headerSubtitle ?? this.header.subtitle}</p>` : c}${e.mode === "human" ? a`<small>${t.humanJoined}</small>` : c}</div>
+      ${this.newChat ? a`<button type="button" class="icon" title=${t.newChat} ?disabled=${!r || this.sessionBusy} @click=${() => r && !this.sessionBusy && void this.run(() => r.newSession({ keepHistory: this.newChatHistory === "keep" }))}>${xt}<span class="sr">${t.newChat}</span></button>` : c}
+      ${this.closable ? a`<button type="button" class="icon" title=${t.closeChat} aria-label=${t.closeChat} @click=${() => this.dispatchEvent(new CustomEvent("osvi-close", { bubbles: !0, composed: !0 }))}>${$t}</button>` : c}</header>
+      <div class="transcript" role="log" aria-live="polite" aria-label="Conversation" @scroll=${(h) => {
+      const f = h.currentTarget;
+      this.followBottom = f.scrollHeight - f.scrollTop - f.clientHeight <= 80;
+    }} @osvi-respond=${this.respond} @osvi-request-input=${this.requestInput}>${yt(e, t, n, r?.resolveUrl("") ?? "", (h) => {
+      r && this.run(() => r.retry(h));
     })}</div>
-      <div class="status" role="status">${this.statusText(t)}${e.error?.retryable && (e.status === "idle" || e.status === "closed") ? a`<button type="button" ?disabled=${this.busy || !s} @click=${() => s && void this.run(() => s.start())}>${t.tryAgain}</button>` : d}</div>
-      ${ft({ strings: t, draft: this.draft, placeholder: this.typed?.placeholder ?? t.placeholder, disabled: this.blocked, input: (o) => {
-      this.draft = o.target.value, this.requestUpdate();
+      <div class="status" role="status">${this.statusText(t)}${e.error?.retryable && (e.status === "idle" || e.status === "closed") ? a`<button type="button" ?disabled=${this.busy || !r} @click=${() => r && void this.run(() => r.start())}>${t.tryAgain}</button>` : c}</div>
+      ${_t({ strings: t, draft: this.draft, placeholder: this.typed?.placeholder ?? t.placeholder, disabled: this.blocked, input: (h) => {
+      this.draft = h.target.value, this.requestUpdate();
     }, send: this.send })}
-      ${this.poweredBy ? a`<footer><a href="https://osvi.ai" target="_blank" rel="noopener noreferrer">${t.poweredBy}</a></footer>` : d}`;
-  }
-}, f.clientFactory = et, f.properties = { themeAttribute: { attribute: "theme" }, stringsAttribute: { attribute: "strings" } }, f.styles = X`
-    :host { display:flex; flex-direction:column; height:100%; min-height:260px; color:var(--osvi-color-text,#18181b); background:var(--osvi-color-background,#fff); font:14px/1.5 system-ui,sans-serif; border-radius:var(--osvi-radius,10px); overflow:hidden; }
-    header { display:flex; align-items:center; gap:10px; padding:14px; border-bottom:1px solid var(--osvi-color-surface,#f4f4f5); } header img { width:36px; height:36px; border-radius:50%; } .heading { flex:1; } h2,p { margin:0; } h2 { font-size:16px; } small { display:block; }
-    .transcript { flex:1; overflow:auto; padding:16px; min-height:0; } .bubble { width:fit-content; max-width:85%; padding:10px 14px; margin:8px 0; border-radius:var(--osvi-radius,10px); background:var(--osvi-color-assistant-bubble,#f4f4f5); overflow-wrap:anywhere; white-space:pre-wrap; } .user { margin-left:auto; color:#fff; background:var(--osvi-color-user-bubble,#4f46e5); } .bubble a { color:inherit; } .divider { text-align:center; } .status { padding:0 14px; } .composer { display:flex; gap:8px; padding:14px; } textarea { flex:1; resize:vertical; min-width:0; } button,textarea { font:inherit; } button { cursor:pointer; } button:disabled { cursor:default; } footer { padding:0 14px 10px; text-align:center; } footer a { color:inherit; } osvi-buttons,osvi-carousel,osvi-date-picker { display:block; margin:8px 0; }
-  `, f);
-h([
+      ${this.poweredBy ? a`<footer><a href="https://osvi.ai" target="_blank" rel="noopener noreferrer">${kt}<span>${t.poweredBy}</span></a></footer>` : c}`;
+  }
+}, g.clientFactory = at, g.properties = { themeAttribute: { attribute: "theme" }, stringsAttribute: { attribute: "strings" } }, g.styles = X`
+    :host { --p:var(--osvi-color-primary,#4f46e5); --bg:var(--osvi-color-background,#fff); --surface:var(--osvi-color-surface,#f4f4f5); --text:var(--osvi-color-text,#18181b);
+      --ub:var(--osvi-color-user-bubble,var(--p)); --ab:var(--osvi-color-assistant-bubble,var(--surface)); --r:var(--osvi-radius,14px);
+      --sub:color-mix(in srgb,var(--text) 58%,var(--bg)); --line:color-mix(in srgb,var(--text) 11%,var(--bg));
+      display:flex; flex-direction:column; height:100%; min-height:260px; color:var(--text); background:var(--bg); font-family:inherit; font-size:14px; line-height:1.5; border-radius:var(--r); overflow:hidden; }
+    * { box-sizing:border-box; } h2,p { margin:0; }
+    button,textarea { font:inherit; color:inherit; } button { cursor:pointer; } button:disabled { cursor:default; opacity:.45; }
+    button:focus-visible,textarea:focus-visible,a:focus-visible { outline:3px solid color-mix(in srgb,var(--p) 55%,transparent); outline-offset:2px; }
+    .sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
+    header { display:flex; align-items:center; gap:12px; padding:14px 12px 14px 16px; border-bottom:1px solid var(--line); }
+    .avatar { width:38px; height:38px; border-radius:50%; flex:none; object-fit:cover; display:grid; place-items:center; background:var(--p); color:#fff; font-weight:700; font-size:15px; }
+    .heading { flex:1; min-width:0; } h2 { font-size:15px; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+    .heading p,.heading small { display:block; font-size:12.5px; color:var(--sub); }
+    .heading small { color:var(--p); font-weight:600; }
+    .icon { width:34px; height:34px; border:0; border-radius:10px; background:transparent; color:var(--sub); display:grid; place-items:center; flex:none; }
+    .icon:hover:not(:disabled) { background:var(--surface); color:var(--text); } .icon svg { width:18px; height:18px; }
+    .transcript { flex:1; overflow:auto; padding:18px 16px; min-height:0; display:flex; flex-direction:column; gap:10px; }
+    .empty { margin:auto; color:var(--sub); text-align:center; }
+    .bubble { width:fit-content; max-width:84%; padding:10px 14px; border-radius:var(--r); border-bottom-left-radius:6px; background:var(--ab); overflow-wrap:anywhere; white-space:pre-wrap; }
+    .bubble.user { align-self:flex-end; color:#fff; background:var(--ub); border-bottom-left-radius:var(--r); border-bottom-right-radius:6px; }
+    .bubble a { color:inherit; } .team { display:block; font-size:11px; font-weight:600; color:var(--p); margin-bottom:2px; }
+    .failed { display:flex; align-items:center; gap:8px; font-size:12px; margin-top:6px; } .failed button { border:0; background:rgb(255 255 255/.2); border-radius:8px; padding:2px 8px; }
+    .divider { display:flex; align-items:center; gap:10px; color:var(--sub); font-size:12px; } .divider::before,.divider::after { content:""; flex:1; height:1px; background:var(--line); }
+    .typing { display:inline-flex; gap:4px; padding:12px 14px; background:var(--ab); border-radius:var(--r); border-bottom-left-radius:6px; width:fit-content; }
+    .typing i { width:6px; height:6px; border-radius:50%; background:var(--sub); animation:osvi-dot 1.2s infinite; } .typing i:nth-child(2) { animation-delay:.15s; } .typing i:nth-child(3) { animation-delay:.3s; }
+    @keyframes osvi-dot { 0%,60%,100% { opacity:.35; transform:none; } 30% { opacity:1; transform:translateY(-3px); } }
+    osvi-buttons,osvi-carousel,osvi-date-picker { display:block; max-width:100%; }
+    .status { padding:0 16px; font-size:12.5px; color:var(--sub); display:flex; gap:8px; align-items:center; } .status:empty { display:none; }
+    .status button { border:1px solid var(--line); background:var(--bg); border-radius:8px; padding:3px 10px; }
+    .composer { margin:10px 12px; display:flex; align-items:flex-end; gap:8px; border:1px solid var(--line); border-radius:18px; padding:6px 6px 6px 14px; background:var(--surface); }
+    .composer:focus-within { border-color:var(--p); box-shadow:0 0 0 3px color-mix(in srgb,var(--p) 18%,transparent); }
+    textarea { flex:1; min-width:0; border:0; outline:0; background:transparent; resize:none; min-height:24px; max-height:120px; padding:6px 0; field-sizing:content; }
+    textarea::placeholder { color:var(--sub); } textarea:focus-visible { outline:0; }
+    .send { width:36px; height:36px; border:0; border-radius:50%; background:var(--p); color:#fff; display:grid; place-items:center; flex:none; } .send svg { width:17px; height:17px; }
+    footer { padding:0 16px 12px; text-align:center; font-size:11.5px; } footer a { color:var(--sub); text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
+    footer a:hover { color:var(--text); } footer svg { width:14px; height:14px; flex:none; }
+    @media (prefers-reduced-motion:reduce) { .typing i { animation:none; } }
+  `, g);
+p([
   l({ attribute: "agent-id" })
-], c.prototype, "agentId");
-h([
+], d.prototype, "agentId");
+p([
   l({ attribute: "base-url" })
-], c.prototype, "baseUrl");
-h([
+], d.prototype, "baseUrl");
+p([
   l({ attribute: !1 })
-], c.prototype, "client");
-h([
+], d.prototype, "client");
+p([
   l({ attribute: !1 })
-], c.prototype, "theme");
-h([
+], d.prototype, "theme");
+p([
   l({ attribute: !1 })
-], c.prototype, "variants");
-h([
+], d.prototype, "variants");
+p([
   l({ attribute: !1 })
-], c.prototype, "strings");
-h([
-  l({ attribute: "powered-by", converter: Z })
-], c.prototype, "poweredBy");
-h([
-  l({ attribute: "new-chat", converter: Z })
-], c.prototype, "newChat");
-h([
+], d.prototype, "strings");
+p([
+  l({ attribute: "powered-by", converter: it })
+], d.prototype, "poweredBy");
+p([
+  l({ attribute: "new-chat", converter: it })
+], d.prototype, "newChat");
+p([
+  l({ attribute: "new-chat-history" })
+], d.prototype, "newChatHistory");
+p([
   l({ attribute: !1 })
-], c.prototype, "header");
-h([
+], d.prototype, "header");
+p([
   l({ type: Boolean })
-], c.prototype, "closable");
-h([
+], d.prototype, "closable");
+p([
   l({ attribute: "header-title" })
-], c.prototype, "headerTitle");
-h([
+], d.prototype, "headerTitle");
+p([
   l({ attribute: "header-subtitle" })
-], c.prototype, "headerSubtitle");
-h([
+], d.prototype, "headerSubtitle");
+p([
   l({ attribute: "header-avatar" })
-], c.prototype, "headerAvatar");
-h([
+], d.prototype, "headerAvatar");
+p([
   l({ attribute: "primary-color" })
-], c.prototype, "primaryColor");
-h([
+], d.prototype, "primaryColor");
+p([
   l()
-], c.prototype, "radius");
-h([
+], d.prototype, "radius");
+p([
   l()
-], c.prototype, "mode");
-h([
+], d.prototype, "mode");
+p([
   l()
-], c.prototype, "buttons");
-h([
+], d.prototype, "buttons");
+p([
   l()
-], c.prototype, "carousel");
-h([
-  b()
-], c.prototype, "chatState");
-h([
-  b()
-], c.prototype, "draft");
-h([
-  b()
-], c.prototype, "busy");
-h([
-  b()
-], c.prototype, "typed");
-let vt = c;
-function A(i, t) {
+], d.prototype, "carousel");
+p([
+  v()
+], d.prototype, "chatState");
+p([
+  v()
+], d.prototype, "draft");
+p([
+  v()
+], d.prototype, "busy");
+p([
+  v()
+], d.prototype, "typed");
+let St = d;
+function U(i, t) {
   typeof customElements > "u" || customElements.get(i) || customElements.define(i, t);
 }
-const B = X`
-  :host { display: block; font: inherit; color: ${x(w("text"))}; background: ${x(w("background"))}; }
-  * { box-sizing: border-box; }
-  button { font: inherit; color: inherit; background: ${x(w("surface"))}; border: 1px solid currentColor; border-radius: var(--osvi-radius, 10px); padding: 10px 14px; cursor: pointer; }
-  button:focus-visible { outline: 3px solid ${x(w("primary"))}; outline-offset: 3px; }
-  button:disabled { opacity: .5; cursor: default; }
-  button[aria-pressed="true"] { outline: 2px solid ${x(w("primary"))}; }
-  small { display: block; }
-  .chips { display: flex; flex-wrap: wrap; gap: 8px; }
-  .list { display: grid; gap: 6px; }
-  .list button { width: 100%; text-align: left; }
-  .card { background: ${x(w("surface"))}; border-radius: var(--osvi-radius, 10px); padding: 12px; }
-  .image { aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden; }
-  .image img { width: 100%; height: 100%; object-fit: cover; }
-  .navigation { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0; }
-  .days, .weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; text-align: center; }
-  .days button { padding: 8px 0; }
+const I = (i) => nt(ut(i)), D = X`
+  :host { --p:${I("primary")}; --bg:${I("background")}; --surface:${I("surface")}; --text:${I("text")}; --r:var(--osvi-radius,14px);
+    --sub:color-mix(in srgb,var(--text) 58%,var(--bg)); --line:color-mix(in srgb,var(--text) 11%,var(--bg));
+    display:block; font:inherit; color:var(--text); }
+  * { box-sizing:border-box; }
+  p { margin:0 0 6px; } .label { font-weight:600; } .description { color:var(--sub); font-size:13px; }
+  .answer { display:inline-block; margin-top:2px; padding:4px 10px; border-radius:999px; background:color-mix(in srgb,var(--p) 12%,var(--bg)); color:var(--p); font-weight:600; font-size:13px; }
+  .sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
+  button { font:inherit; color:inherit; cursor:pointer; }
+  button:focus-visible { outline:3px solid color-mix(in srgb,var(--p) 55%,transparent); outline-offset:2px; }
+  button:disabled { opacity:.45; cursor:default; }
+  small { display:block; color:var(--sub); font-size:12px; font-weight:400; }
+  .chips { display:flex; flex-wrap:wrap; gap:8px; }
+  .chips button { border:1.5px solid color-mix(in srgb,var(--p) 55%,var(--line)); background:var(--bg); color:var(--p); border-radius:999px; padding:7px 14px; font-weight:600; font-size:13px; text-align:center; }
+  .chips button:hover:not(:disabled) { background:color-mix(in srgb,var(--p) 10%,var(--bg)); }
+  .text { display:grid; gap:1px; min-width:0; }
+  .chips small { color:inherit; opacity:.8; }
+  .list { display:grid; gap:6px; }
+  .list > button { display:flex; justify-content:space-between; align-items:center; gap:10px; width:100%; text-align:left; border:1px solid var(--line); background:var(--bg); border-radius:12px; padding:10px 12px; }
+  .list > button:hover:not(:disabled) { border-color:var(--p); }
+  .list > button svg { width:16px; height:16px; flex:none; color:var(--sub); }
+  .card { background:var(--bg); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:0 6px 18px -10px rgb(16 18 30/.35); }
+  .card .body { padding:10px 12px 12px; display:grid; gap:4px; } .card h3 { margin:0; font-size:14px; } .card p { margin:0; color:var(--sub); font-size:12.5px; }
+  .image { aspect-ratio:16 / 9; max-width:100%; display:grid; place-items:center; overflow:hidden; background:var(--surface); color:var(--sub); font-size:12px; }
+  .image img { width:100%; height:100%; object-fit:cover; display:block; }
+  .primary { justify-self:start; margin-top:6px; border:0; border-radius:10px; background:var(--p); color:#fff; font-weight:600; font-size:13px; padding:8px 14px; }
+  .list .card { display:grid; grid-template-columns:minmax(0,88px) 1fr; } .list .card .image { aspect-ratio:auto; height:100%; min-height:88px; }
+  .list .card:not(:has(.image)) { grid-template-columns:1fr; }
+  .navigation { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:10px 0 0; }
+  .round { width:32px; height:32px; border-radius:50%; border:1px solid var(--line); background:var(--bg); display:grid; place-items:center; padding:0; flex:none; }
+  .round:hover:not(:disabled) { border-color:var(--p); } .round svg { width:15px; height:15px; }
+  .dots { display:flex; gap:5px; align-items:center; } .dots i { width:6px; height:6px; border-radius:3px; background:var(--line); transition:width .2s; } .dots i.on { width:16px; background:var(--p); }
+  .calendar { border:1px solid var(--line); border-radius:var(--r); padding:10px; background:var(--bg); display:grid; gap:6px; }
+  .calendar .navigation { margin:0; font-weight:600; font-size:13px; }
+  .days, .weekdays { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:2px 0; text-align:center; }
+  .weekdays { color:var(--sub); font-size:11px; }
+  .days button { border:0; background:transparent; height:30px; border-radius:8px; padding:0; font-size:12.5px; font-variant-numeric:tabular-nums; }
+  .days button:hover:not(:disabled) { background:var(--surface); }
+  .days button.today { box-shadow:inset 0 0 0 1.5px var(--line); }
+  .days button.in { background:color-mix(in srgb,var(--p) 14%,transparent); border-radius:0; }
+  .days button[aria-pressed="true"] { background:var(--p); color:#fff; }
+  .days button.start:not(.end) { border-radius:8px 0 0 8px; } .days button.end:not(.start) { border-radius:0 8px 8px 0; }
+  .hint { color:var(--sub); font-size:12px; margin:0; }
+  @media (prefers-reduced-motion:reduce) { .dots i { transition:none; } }
 `;
-var yt = Object.defineProperty, P = (i, t, e, s) => {
-  for (var n = void 0, r = i.length - 1, o; r >= 0; r--)
-    (o = i[r]) && (n = o(t, e, n) || n);
-  return n && yt(t, e, n), n;
+var It = Object.defineProperty, P = (i, t, e, r) => {
+  for (var s = void 0, n = i.length - 1, o; n >= 0; n--)
+    (o = i[n]) && (s = o(t, e, s) || s);
+  return s && It(t, e, s), s;
 };
-class m extends W {
+class w extends W {
   constructor() {
     super(...arguments), this.interaction = null, this.disabled = !1, this.baseUrl = "";
   }
@@ -364,66 +440,66 @@ class m extends W {
   }
   get valid() {
     const t = this.interaction;
-    return !!t && t.tool_type === this.toolType && it(t, t.presentation);
+    return !!t && t.tool_type === this.toolType && ot(t, t.presentation);
   }
   respond(t) {
     !this.interaction || !this.live || !this.valid || this.dispatchEvent(new CustomEvent("osvi-respond", { bubbles: !0, composed: !0, detail: { interactionId: this.interaction.interaction_id, response: t } }));
   }
   updated(t) {
-    t.has("theme") && G(this, this.theme);
+    t.has("theme") && Q(this, this.theme);
   }
 }
 P([
   l({ attribute: !1 })
-], m.prototype, "interaction");
+], w.prototype, "interaction");
 P([
   l({ type: Boolean })
-], m.prototype, "disabled");
+], w.prototype, "disabled");
 P([
   l({ attribute: !1 })
-], m.prototype, "theme");
+], w.prototype, "theme");
 P([
   l({ attribute: "base-url" })
-], m.prototype, "baseUrl");
-var gt = Object.defineProperty, mt = (i, t, e, s) => {
-  for (var n = void 0, r = i.length - 1, o; r >= 0; r--)
-    (o = i[r]) && (n = o(t, e, n) || n);
-  return n && gt(t, e, n), n;
+], w.prototype, "baseUrl");
+var At = Object.defineProperty, Mt = (i, t, e, r) => {
+  for (var s = void 0, n = i.length - 1, o; n >= 0; n--)
+    (o = i[n]) && (s = o(t, e, s) || s);
+  return s && At(t, e, s), s;
 };
-const E = class E extends m {
+const j = class j extends w {
   constructor() {
     super(...arguments), this.toolType = "ui_buttons", this.variant = "chips";
   }
   render() {
     const t = this.interaction;
-    if (!t) return d;
+    if (!t) return c;
     if (!this.valid) return a`<p>${t.content}</p>`;
-    const e = t.presentation, s = t.response_payload?.kind === "text" ? t.response_payload.value : e.options.find((n) => n.id === (t.response_payload?.kind === "selection" ? t.response_payload.value : t.selected_option_id))?.label;
-    return a`<p>${e.label}</p>${e.description ? a`<p>${e.description}</p>` : d}
+    const e = t.presentation, r = t.response_payload?.kind === "text" ? t.response_payload.value : e.options.find((s) => s.id === (t.response_payload?.kind === "selection" ? t.response_payload.value : t.selected_option_id))?.label;
+    return a`<p class="label">${e.label}</p>${e.description ? a`<p class="description">${e.description}</p>` : c}
       ${this.live ? a`<div role="group" aria-label="Options" class=${this.variant} @keydown=${this.onKey}>
-        ${e.options.map((n) => a`<button type="button" @click=${() => this.pick(n.id, n.allow_input, n.input_placeholder)}><span>${n.label}</span>${n.description ? a`<small>${n.description}</small>` : d}</button>`)}
-      </div>` : s ? a`<p>${s}</p>` : d}`;
+        ${e.options.map((s) => a`<button type="button" @click=${() => this.pick(s.id, s.allow_input, s.input_placeholder)}><span class="text"><span>${s.label}</span>${s.description ? a`<small>${s.description}</small>` : c}</span>${this.variant === "list" ? R : c}</button>`)}
+      </div>` : r ? a`<p class="answer">${r}</p>` : c}`;
   }
-  pick(t, e, s) {
-    !this.live || !this.valid || !this.interaction || (this.interaction.schema_version === 2 && e ? this.dispatchEvent(new CustomEvent("osvi-request-input", { bubbles: !0, composed: !0, detail: { interactionId: this.interaction.interaction_id, placeholder: s } })) : this.respond({ kind: "selection", value: t }));
+  pick(t, e, r) {
+    !this.live || !this.valid || !this.interaction || (this.interaction.schema_version === 2 && e ? this.dispatchEvent(new CustomEvent("osvi-request-input", { bubbles: !0, composed: !0, detail: { interactionId: this.interaction.interaction_id, placeholder: r } })) : this.respond({ kind: "selection", value: t }));
   }
   onKey(t) {
     if (!["ArrowDown", "ArrowUp", "ArrowRight", "ArrowLeft"].includes(t.key)) return;
-    const e = [...this.renderRoot.querySelectorAll("button")], s = e.indexOf(this.renderRoot.activeElement), n = t.key === "ArrowDown" || t.key === "ArrowRight" ? 1 : -1;
-    e[(s + n + e.length) % e.length]?.focus(), t.preventDefault();
+    const e = [...this.renderRoot.querySelectorAll("button")], r = e.indexOf(this.renderRoot.activeElement), s = t.key === "ArrowDown" || t.key === "ArrowRight" ? 1 : -1;
+    e[(r + s + e.length) % e.length]?.focus(), t.preventDefault();
   }
 };
-E.styles = B;
-let I = E;
-mt([
+j.styles = D;
+let M = j;
+Mt([
   l()
-], I.prototype, "variant");
-var $t = Object.defineProperty, q = (i, t, e, s) => {
-  for (var n = void 0, r = i.length - 1, o; r >= 0; r--)
-    (o = i[r]) && (n = o(t, e, n) || n);
-  return n && $t(t, e, n), n;
+], M.prototype, "variant");
+var Ut = Object.defineProperty, q = (i, t, e, r) => {
+  for (var s = void 0, n = i.length - 1, o; n >= 0; n--)
+    (o = i[n]) && (s = o(t, e, s) || s);
+  return s && Ut(t, e, s), s;
 };
-const O = class O extends m {
+const F = class F extends w {
   constructor() {
     super(...arguments), this.toolType = "ui_carousel", this.variant = "slider", this.index = 0, this.imageFailed = /* @__PURE__ */ new Set(), this.suppressPointerClick = !1;
   }
@@ -432,20 +508,20 @@ const O = class O extends m {
   }
   render() {
     const t = this.interaction;
-    if (!t) return d;
+    if (!t) return c;
     if (!this.valid) return a`<p>${t.content}</p>`;
-    const e = t.presentation, s = e.items.find((n) => n.id === (t.response_payload?.kind === "selection" ? t.response_payload.value : t.selected_option_id));
-    return a`<p>${e.label}</p>${e.description ? a`<p>${e.description}</p>` : d}
-      ${this.live ? this.variant === "list" ? a`<div class="list">${e.items.map((n, r) => this.card(n, r))}</div>` : a`<div @pointerdown=${(n) => {
-      this.pointerStart = n.clientX, this.suppressPointerClick = !1;
-    }} @pointerup=${(n) => {
-      this.pointerStart !== void 0 && Math.abs(n.clientX - this.pointerStart) > 40 && (this.suppressPointerClick = !0, this.navigate(n.clientX < this.pointerStart ? 1 : -1, e.items.length)), this.pointerStart = void 0;
+    const e = t.presentation, r = e.items.find((s) => s.id === (t.response_payload?.kind === "selection" ? t.response_payload.value : t.selected_option_id));
+    return a`<p class="label">${e.label}</p>${e.description ? a`<p class="description">${e.description}</p>` : c}
+      ${this.live ? this.variant === "list" ? a`<div class="list">${e.items.map((s, n) => this.card(s, n))}</div>` : a`<div @pointerdown=${(s) => {
+      this.pointerStart = s.clientX, this.suppressPointerClick = !1;
+    }} @pointerup=${(s) => {
+      this.pointerStart !== void 0 && Math.abs(s.clientX - this.pointerStart) > 40 && (this.suppressPointerClick = !0, this.navigate(s.clientX < this.pointerStart ? 1 : -1, e.items.length)), this.pointerStart = void 0;
     }} @pointercancel=${() => {
       this.pointerStart = void 0;
     }}>${this.card(e.items[this.index], this.index)}</div>
-        <div class="navigation"><button type="button" aria-label="Previous card" ?disabled=${this.index === 0} @click=${() => this.navigate(-1, e.items.length)}>Previous</button>
-          <span aria-live="polite">${this.index + 1} of ${e.items.length}</span>
-          <button type="button" aria-label="Next card" ?disabled=${this.index === e.items.length - 1} @click=${() => this.navigate(1, e.items.length)}>Next</button></div>` : s ? a`<p>${s.title}</p>` : d}`;
+        <div class="navigation"><button type="button" class="round" aria-label="Previous card" ?disabled=${this.index === 0} @click=${() => this.navigate(-1, e.items.length)}>${et}</button>
+          <span class="dots" aria-hidden="true">${e.items.map((s, n) => a`<i class=${n === this.index ? "on" : ""}></i>`)}</span><span class="sr" aria-live="polite">${this.index + 1} of ${e.items.length}</span>
+          <button type="button" class="round" aria-label="Next card" ?disabled=${this.index === e.items.length - 1} @click=${() => this.navigate(1, e.items.length)}>${R}</button></div>` : r ? a`<p class="answer">${r.title}</p>` : c}`;
   }
   navigate(t, e) {
     this.index = Math.max(0, Math.min(e - 1, this.index + t));
@@ -458,113 +534,113 @@ const O = class O extends m {
     this.respond({ kind: "selection", value: e });
   }
   card(t, e) {
-    const s = t.image;
-    return a`<article class="card">${s && st(s.url) ? a`<div class="image">${this.imageFailed.has(e) ? a`<span role="img" aria-label="Image unavailable">Image unavailable</span>` : a`<img src=${this.baseUrl.replace(/\/$/, "") + s.url} alt=${s.alt} referrerpolicy="no-referrer" loading="lazy" @error=${() => {
+    const r = t.image;
+    return a`<article class="card">${r && lt(r.url) ? a`<div class="image">${this.imageFailed.has(e) ? a`<span role="img" aria-label="Image unavailable">Image unavailable</span>` : a`<img src=${this.baseUrl.replace(/\/$/, "") + r.url} alt=${r.alt} referrerpolicy="no-referrer" loading="lazy" @error=${() => {
       this.imageFailed = /* @__PURE__ */ new Set([...this.imageFailed, e]);
-    }}>`}</div>` : d}
-      <h3>${t.title}</h3>${t.description ? a`<p>${t.description}</p>` : d}
-      <button type="button" @click=${(n) => this.select(n, t.id)}>${t.action_label ?? "Select"}</button></article>`;
+    }}>`}</div>` : c}
+      <div class="body"><h3>${t.title}</h3>${t.description ? a`<p>${t.description}</p>` : c}
+      <button type="button" class="primary" @click=${(s) => this.select(s, t.id)}>${t.action_label ?? "Select"}</button></div></article>`;
   }
 };
-O.styles = B;
-let k = O;
+F.styles = D;
+let _ = F;
 q([
   l()
-], k.prototype, "variant");
+], _.prototype, "variant");
 q([
-  b()
-], k.prototype, "index");
+  v()
+], _.prototype, "index");
 q([
-  b()
-], k.prototype, "imageFailed");
-var xt = Object.defineProperty, T = (i, t, e, s) => {
-  for (var n = void 0, r = i.length - 1, o; r >= 0; r--)
-    (o = i[r]) && (n = o(t, e, n) || n);
-  return n && xt(t, e, n), n;
+  v()
+], _.prototype, "imageFailed");
+var Pt = Object.defineProperty, T = (i, t, e, r) => {
+  for (var s = void 0, n = i.length - 1, o; n >= 0; n--)
+    (o = i[n]) && (s = o(t, e, s) || s);
+  return s && Pt(t, e, s), s;
 };
-const tt = (i) => `${String(i.getFullYear()).padStart(4, "0")}-${String(i.getMonth() + 1).padStart(2, "0")}-${String(i.getDate()).padStart(2, "0")}`, D = () => tt(/* @__PURE__ */ new Date()), V = (i) => {
+const st = (i) => `${String(i.getFullYear()).padStart(4, "0")}-${String(i.getMonth() + 1).padStart(2, "0")}-${String(i.getDate()).padStart(2, "0")}`, A = () => st(/* @__PURE__ */ new Date()), Y = (i) => {
   const t = /* @__PURE__ */ new Date(0);
   return t.setHours(0, 0, 0, 0), t.setFullYear(Number(i.slice(0, 4)), Number(i.slice(5, 7)) - 1, Number(i.slice(8, 10))), t;
-}, v = (i) => i.slice(0, 7), j = class j extends m {
+}, y = (i) => i.slice(0, 7), L = class L extends w {
   constructor() {
-    super(...arguments), this.toolType = "ui_date_picker", this.variant = "grid", this.month = v(D()), this.start = "", this.end = "";
+    super(...arguments), this.toolType = "ui_date_picker", this.variant = "grid", this.month = y(A()), this.start = "", this.end = "";
   }
   earliest(t) {
-    return t.min_date && t.min_date > D() ? t.min_date : D();
+    return t.min_date && t.min_date > A() ? t.min_date : A();
   }
   willUpdate(t) {
-    t.has("interaction") && (this.start = "", this.end = "", this.valid && (this.month = v(this.earliest(this.interaction.presentation))));
+    t.has("interaction") && (this.start = "", this.end = "", this.valid && (this.month = y(this.earliest(this.interaction.presentation))));
   }
   render() {
     const t = this.interaction;
-    if (!t) return d;
+    if (!t) return c;
     if (!this.valid) return a`<p>${t.content}</p>`;
-    const e = t.presentation, s = t.response_payload, n = s?.kind === "date_range" ? `${s.value.start_date} – ${s.value.end_date}` : s?.kind === "date" || s?.kind === "text" ? s.value : t.selected_option_id;
-    if (!this.live) return a`<p>${e.label}</p>${e.description ? a`<p>${e.description}</p>` : d}${n ? a`<p>${n}</p>` : d}`;
-    const r = V(`${this.month}-01`), o = new Date(r);
+    const e = t.presentation, r = t.response_payload, s = r?.kind === "date_range" ? `${r.value.start_date} – ${r.value.end_date}` : r?.kind === "date" || r?.kind === "text" ? r.value : t.selected_option_id;
+    if (!this.live) return a`<p class="label">${e.label}</p>${e.description ? a`<p class="description">${e.description}</p>` : c}${s ? a`<p class="answer">${s}</p>` : c}`;
+    const n = Y(`${this.month}-01`), o = new Date(n);
     o.setMonth(o.getMonth() + 1, 0);
-    const u = this.earliest(e), _ = Array.from({ length: o.getDate() }, (p, U) => `${this.month}-${String(U + 1).padStart(2, "0")}`), $ = e.selection_mode === "range" ? this.start ? this.end ? `${this.start} – ${this.end}` : `Check-in: ${this.start}. Choose check-out.` : "Choose check-in, then check-out." : this.start;
-    return a`<p>${e.label}</p>${e.description ? a`<p>${e.description}</p>` : d}
-      <div class="navigation"><button type="button" aria-label="Previous month" ?disabled=${this.month <= v(u)} @click=${() => this.moveMonth(-1, e)}>Previous</button>
-        <span aria-live="polite">${r.toLocaleDateString(void 0, { month: "long", year: "numeric" })}</span>
-        <button type="button" aria-label="Next month" ?disabled=${!!e.max_date && this.month >= v(e.max_date)} @click=${() => this.moveMonth(1, e)}>Next</button></div>
-      <div class="weekdays" aria-hidden="true">${["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((p) => a`<span>${p}</span>`)}</div>
+    const h = this.earliest(e), f = Array.from({ length: o.getDate() }, (u, z) => `${this.month}-${String(z + 1).padStart(2, "0")}`), k = e.selection_mode === "range" ? this.start ? this.end ? `${this.start} – ${this.end}` : `Check-in: ${this.start}. Choose check-out.` : "Choose check-in, then check-out." : this.start, rt = A();
+    return a`<p class="label">${e.label}</p>${e.description ? a`<p class="description">${e.description}</p>` : c}
+      <div class="calendar"><div class="navigation"><button type="button" class="round" aria-label="Previous month" ?disabled=${this.month <= y(h)} @click=${() => this.moveMonth(-1, e)}>${et}</button>
+        <span aria-live="polite">${n.toLocaleDateString(void 0, { month: "long", year: "numeric" })}</span>
+        <button type="button" class="round" aria-label="Next month" ?disabled=${!!e.max_date && this.month >= y(e.max_date)} @click=${() => this.moveMonth(1, e)}>${R}</button></div>
+      <div class="weekdays" aria-hidden="true">${["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((u) => a`<span>${u}</span>`)}</div>
       <div class="days" role="group" aria-label="Choose date" @keydown=${this.onKey}>
-        ${Array.from({ length: r.getDay() }, () => a`<span></span>`)}
-        ${_.map((p, U) => a`<button type="button" aria-label=${p} aria-pressed=${p === this.start || p === this.end} ?disabled=${p < u || !!e.max_date && p > e.max_date} @click=${() => this.pick(p, e)}>${U + 1}</button>`)}
-      </div><p aria-live="polite">${$}</p>
-      <button type="button" ?disabled=${!this.start || e.selection_mode === "range" && (!this.end || this.start >= this.end)} @click=${() => this.confirm(e)}>${e.confirm_label ?? "Confirm date"}</button>`;
+        ${Array.from({ length: n.getDay() }, () => a`<span></span>`)}
+        ${f.map((u, z) => a`<button type="button" class=${[u === rt ? "today" : "", u === this.start ? "start" : "", u === this.end ? "end" : "", this.start && this.end && u > this.start && u < this.end ? "in" : ""].filter(Boolean).join(" ")} aria-label=${u} aria-pressed=${u === this.start || u === this.end} ?disabled=${u < h || !!e.max_date && u > e.max_date} @click=${() => this.pick(u, e)}>${z + 1}</button>`)}
+      </div><p class="hint" aria-live="polite">${k}</p>
+      <button type="button" class="primary" ?disabled=${!this.start || e.selection_mode === "range" && (!this.end || this.start >= this.end)} @click=${() => this.confirm(e)}>${e.confirm_label ?? "Confirm date"}</button></div>`;
   }
   moveMonth(t, e) {
-    const s = V(`${this.month}-01`);
-    s.setMonth(s.getMonth() + t);
-    const n = v(tt(s));
-    n >= v(this.earliest(e)) && (!e.max_date || n <= v(e.max_date)) && (this.month = n);
+    const r = Y(`${this.month}-01`);
+    r.setMonth(r.getMonth() + t);
+    const s = y(st(r));
+    s >= y(this.earliest(e)) && (!e.max_date || s <= y(e.max_date)) && (this.month = s);
   }
   pick(t, e) {
-    !this.live || !this.valid || !R(t) || t < this.earliest(e) || e.max_date && t > e.max_date || (e.selection_mode === "single" || !this.start || this.end || t <= this.start ? (this.start = t, this.end = "") : this.end = t);
+    !this.live || !this.valid || !B(t) || t < this.earliest(e) || e.max_date && t > e.max_date || (e.selection_mode === "single" || !this.start || this.end || t <= this.start ? (this.start = t, this.end = "") : this.end = t);
   }
   confirm(t) {
-    !R(this.start) || this.start < this.earliest(t) || t.max_date && this.start > t.max_date || (t.selection_mode === "single" ? this.respond({ kind: "date", value: this.start }) : R(this.end) && this.start < this.end && (!t.max_date || this.end <= t.max_date) && this.respond({ kind: "date_range", value: { start_date: this.start, end_date: this.end } }));
+    !B(this.start) || this.start < this.earliest(t) || t.max_date && this.start > t.max_date || (t.selection_mode === "single" ? this.respond({ kind: "date", value: this.start }) : B(this.end) && this.start < this.end && (!t.max_date || this.end <= t.max_date) && this.respond({ kind: "date_range", value: { start_date: this.start, end_date: this.end } }));
   }
   onKey(t) {
-    const s = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -7, ArrowDown: 7 }[t.key];
-    if (s === void 0) return;
-    const n = [...this.renderRoot.querySelectorAll(".days button")], r = n.indexOf(this.renderRoot.activeElement);
-    if (r < 0) return;
-    let o = r + s;
-    for (; o >= 0 && o < n.length && n[o]?.disabled; ) o += s > 0 ? 1 : -1;
-    n[o]?.focus(), t.preventDefault();
+    const r = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -7, ArrowDown: 7 }[t.key];
+    if (r === void 0) return;
+    const s = [...this.renderRoot.querySelectorAll(".days button")], n = s.indexOf(this.renderRoot.activeElement);
+    if (n < 0) return;
+    let o = n + r;
+    for (; o >= 0 && o < s.length && s[o]?.disabled; ) o += r > 0 ? 1 : -1;
+    s[o]?.focus(), t.preventDefault();
   }
 };
-j.styles = B;
-let g = j;
+L.styles = D;
+let $ = L;
 T([
   l()
-], g.prototype, "variant");
+], $.prototype, "variant");
 T([
-  b()
-], g.prototype, "month");
+  v()
+], $.prototype, "month");
 T([
-  b()
-], g.prototype, "start");
+  v()
+], $.prototype, "start");
 T([
-  b()
-], g.prototype, "end");
-A("osvi-chat", vt);
-A("osvi-buttons", I);
-A("osvi-carousel", k);
-A("osvi-date-picker", g);
+  v()
+], $.prototype, "end");
+U("osvi-chat", St);
+U("osvi-buttons", M);
+U("osvi-carousel", _);
+U("osvi-date-picker", $);
 export {
-  N as DEFAULT_STRINGS,
-  I as OsviButtons,
-  k as OsviCarousel,
-  vt as OsviChat,
-  g as OsviDatePicker,
-  G as applyTheme,
-  w as cssVar,
-  A as defineOnce,
-  lt as explicitThemeVariables,
-  F as themeVariables
+  H as DEFAULT_STRINGS,
+  M as OsviButtons,
+  _ as OsviCarousel,
+  St as OsviChat,
+  $ as OsviDatePicker,
+  Q as applyTheme,
+  ut as cssVar,
+  U as defineOnce,
+  bt as explicitThemeVariables,
+  E as themeVariables
 };
 //# sourceMappingURL=ui.mjs.map